@vonaffenfels/slate-editor 1.0.2 → 1.0.4

package/src/SidebarEditor.js

@@ -1,19 +1,11 @@
 import {
-    Accordion,
-    AccordionItem,
-    Button,
-    FormLabel,
-    Note,
-    Switch,
-    Heading,
-    IconButton,
-    Icon,
-} from "@contentful/forma-36-react-components";
-
-import "./SidebarEditor.css";
+    useState, useEffect,
+} from "react";
 import {SidebarEditorField} from "./SidebarEditor/SidebarEditorField";
 import {ToolMargin} from "./Tools/Margin";
 
+import "../scss/sidebarEditor.scss";
+
 const SidebarEditor = ({
     sdk,
     storybookElement,
@@ -23,6 +15,11 @@ const SidebarEditor = ({
     onDelete,
     onMove,
 }) => {
+    const [versions, setVersions] = useState([]);
+    const [lastChangedProperty, setLastChangedProperty] = useState(null);
+    const [versionCount, setVersionCount] = useState(0);
+    const [currentVersion, setCurrentVersion] = useState(0);
+
     const fields = {
         fields: {},
         tables: {},
@@ -49,6 +46,18 @@ const SidebarEditor = ({
     const handleFieldValueChange = (
         fieldKey, value, mvpFieldKey, mvpIndex,
     ) => {
+        let targetFieldKey = mvpFieldKey ? `${fieldKey}-${mvpIndex}-${mvpFieldKey}` : fieldKey;
+
+        if (lastChangedProperty !== targetFieldKey) {
+            addVersion(storybookElement);
+
+            if (mvpFieldKey) {
+                setLastChangedProperty(`${fieldKey}-${mvpIndex}-${mvpFieldKey}`);
+            } else {
+                setLastChangedProperty(fieldKey);
+            }
+        }
+
         if (onChange) {
             if (mvpFieldKey !== undefined && mvpIndex !== undefined) {
                 let newMVPValue = storybookElement.attributes[fieldKey].map((f, index) => {
@@ -62,109 +71,241 @@ const SidebarEditor = ({
                     return f;
                 });
 
-                onChange({
+                let newStorybookElement = {
                     ...storybookElement,
                     attributes: {
                         ...storybookElement.attributes,
                         [fieldKey]: newMVPValue,
                     },
-                });
+                };
+
+                onChange(newStorybookElement);
             } else {
-                onChange({
+                let newStorybookElement = {
                     ...storybookElement,
                     attributes: {
                         ...storybookElement.attributes,
                         [fieldKey]: value,
                     },
-                });
+                };
+
+                onChange(newStorybookElement);
             }
         }
     };
 
+    const addVersion = (content) => {
+        let newVersionCount = versionCount + 1;
+
+        setVersions([...versions, {
+            content,
+            id: newVersionCount,
+        }]);
+
+        setCurrentVersion(newVersionCount + 1);
+        setVersionCount(newVersionCount);
+    };
+
+    const undo = () => {
+        let targetVersionId = currentVersion - 1;
+        let targetVersion = versions.find(v => v.id === targetVersionId);
+
+        if (targetVersion) {
+            if (currentVersion > versionCount) {
+                addVersion(storybookElement);
+            }
+
+            onChange(targetVersion.content);
+            setCurrentVersion(targetVersionId);
+            setLastChangedProperty(null);
+        } else {
+            console.error(`Version with ID ${targetVersionId} not found`, versions);
+        }
+    };
+
+    const redo = () => {
+        let targetVersionId = currentVersion + 1;
+        let targetVersion = versions.find(v => v.id === targetVersionId);
+
+        if (targetVersion) {
+            onChange(targetVersion.content);
+            setCurrentVersion(targetVersionId);
+        } else {
+            console.error(`Version with ID ${targetVersionId} not found`, versions);
+        }
+    };
+
+    const resetVersions = () => {
+        setVersionCount(0);
+        setCurrentVersion(0);
+        setLastChangedProperty(null);
+        setVersions([]);
+    };
+
+    const handleBlockSelectChange = (block) => {
+        if (onChange) {
+            setLastChangedProperty(null);
+            addVersion(storybookElement);
+            onChange(block);
+        }
+    };
+
+    const handleVariantSelectChange = (variant) => {
+        if (onChange) {
+            setLastChangedProperty(null);
+            addVersion(storybookElement);
+            onChange(variant);
+        }
+    };
+
+    useEffect(() => resetVersions, [storybookElement?.editorAttributes?.ref]);
+
     return (
         <div id="sidebar-editor">
-            <div className="mb-2">
-                <div className="flex items-center">
-                    <div className="grow pr-2">
-                        <BlockSelect stories={storybookStories} active={storybookElement} onChange={onChange} className="font-bold"/>
+            <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")}>
+                                        ↑
+                                    </IconButton>
+                                    <IconButton title="Nach unten verschieben" onClick={() => onMove && onMove(storybookElement, "down")}>
+                                        ↓
+                                    </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>
+                            </div>
+                        )}
                     </div>
-                    {!!onClose && <div className="cursor-pointer p-1" onClick={onClose} title="Schließen"><Icon icon="Close" /></div>}
+                    {!!onClose && <IconButton onClick={onClose} title="Schließen">⨯</IconButton>}
                 </div>
+                <hr className="mt-2" style={{borderColor: "#cfd9e0"}}/>
             </div>
-            {storybookElement?.block && (
-                <div>
-                    <VariantSelect story={story} onChange={onChange} className="mb-2" />
-                    <div className="flex items-center">
-                        <select
-                            value={storybookElement.attributes.blockWidth}
-                            onChange={e => handleFieldValueChange("blockWidth", e.target.value)}
-                            className="grow">
-                            <option disabled>Breite wählen</option>
-                            <option value={undefined}>Volle Breite</option>
-                            <option value={"article"}>Artikel Breite</option>
-                            <option value={"site"}>Seiten Breite</option>
-                            <option value={"small"}>Klein</option>
-                        </select>
-                        <div className="cursor-pointer p-2" title="Nach oben verschieben" onClick={() => onMove && onMove(storybookElement, "up")}>
-                            ↑
-                        </div>
-                        <div className="cursor-pointer p-2" title="Nach unten verschieben" onClick={() => onMove && onMove(storybookElement, "down")}>
-                            ↓
-                        </div>
-                        <div className="p-2 pt-3">
-                            <ToolMargin
-                                margin={storybookElement.attributes.margin}
-                                onChange={value => handleFieldValueChange("margin", value)} />
-                        </div>
-                        <div className="cursor-pointer p-2" title="Löschen" onClick={() => onDelete && onDelete(storybookElement)}>
-                            🗑
+            <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>
+                        <hr className="my-4" style={{borderColor: "#cfd9e0"}}/>
                     </div>
-                    <hr className="my-4" style={{borderColor: "rgb(174, 193, 204)"}}/>
-                </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,
-                            )}
-                        />;
-                    })}
-                    <Accordion>
+                )}
+                {!!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 (
-                                <AccordionItem key={`accordion-item-${tableKey}`} title={tableKey}>
-                                    {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={value => handleFieldValueChange(key, value)}
-                                        />;
-                                    })}
-                                </AccordionItem>
+                                <details key={`accordion-item-${tableKey}`}>
+                                    <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={value => handleFieldValueChange(key, value)}
+                                            />;
+                                        })}
+                                    </div>
+                                </details>
                             );
                         })}
-                    </Accordion>
-                </>
-            )}
+                    </>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export const IconButton = ({
+    children,
+    disabled,
+    size = "medium",
+    className,
+    ...props
+}) => {
+    let classNames = "icon-button cursor-pointer select-none !p-1";
+
+    if (disabled) {
+        classNames += " disabled";
+    }
+
+    if (className) {
+        classNames += ` ${className}`;
+    }
+
+    switch (size) {
+        case "small":
+            classNames += " !text-xs min-w-[28px]";
+            break;
+        case "medium":
+        default:
+            classNames += " !text-sm min-w-[32px]";
+    }
+
+    return (
+        <div className={classNames} {...props}>
+            {children}
+        </div>
+    );
+};
+
+const BlockWidthSelect = ({
+    value,
+    onChange,
+    className,
+}) => {
+    return (
+        <div>
+            <label className="block">Breite</label>
+            <select
+                value={value || ""}
+                onChange={onChange}
+                className={className}>
+                <option disabled>Breite wählen</option>
+                <option value={""}>Volle Breite</option>
+                <option value={"article"}>Artikel Breite</option>
+                <option value={"site"}>Seiten Breite</option>
+                <option value={"small"}>Klein</option>
+            </select>
         </div>
     );
 };
@@ -176,21 +317,26 @@ const VariantSelect = ({
 }) => {
     const stories = story?.stories?.filter(s => s.title !== story.title) || [];
 
-    if (stories.length <= 1 || !onChange) {
+    if (!onChange) {
         return null;
     }
 
-    return <select
-        className={className}
-        onChange={e => onChange && onChange({
-            block: story.id,
-            attributes: {...stories.find(s => s.title === e.target.value)?.args || {}},
-        })}>
-        <option>Preset wählen</option>
-        {stories.map(s => (
-            <option key={`variant-option-${s.title}`} value={s.title}>{s.title}</option>
-        ))}
-    </select>;
+    return (
+        <div className={className}>
+            <label className="block">Preset</label>
+            <select
+                disabled={stories.length <= 1}
+                onChange={e => onChange && onChange({
+                    block: story.id,
+                    attributes: {...stories.find(s => s.title === e.target.value)?.args || {}},
+                })}>
+                <option>Preset wählen</option>
+                {stories.map(s => (
+                    <option key={`variant-option-${s.title}`} value={s.title}>{s.title}</option>
+                ))}
+            </select>
+        </div>
+    );
 };
 
 const BlockSelect = ({
@@ -210,27 +356,31 @@ const BlockSelect = ({
 
         // reset to the first story
         onChange({
+            ...active,
             block: story.id,
             attributes: {...(story?.stories?.[0]?.args || {})},
         });
     };
 
     return (
-        <select
-            onChange={e => onSelectChange(stories.find(s => s.id === e.target.value))}
-            className={className}
-        >
-            <option>Element wählen</option>
-            {stories.map(s => (
-                <option
-                    key={`variant-option-${s.id}`}
-                    selected={active?.block === s.id}
-                    value={s.id}
-                >
-                    {s.title}
-                </option>
-            ))}
-        </select>
+        <div className={className}>
+            <label className="block">Element</label>
+            <select
+                onChange={e => onSelectChange(stories.find(s => s.id === e.target.value))}
+                className="font-bold"
+            >
+                <option>Element wählen</option>
+                {stories.map(s => (
+                    <option
+                        key={`variant-option-${s.id}`}
+                        selected={active?.block === s.id}
+                        value={s.id}
+                    >
+                        {s.title}
+                    </option>
+                ))}
+            </select>
+        </div>
     );
 };
 

package/src/Toolbar/Toolbar.js

@@ -26,7 +26,10 @@ export const Portal = ({children}) => {
     return ReactDOM.createPortal(children, window.document.body);
 };
 
-export const Toolbar = ({hover}) => {
+export const Toolbar = ({
+    hover,
+    onSaveClick,
+}) => {
     const ref = useRef();
     const editor = useSlate();
 
@@ -90,39 +93,41 @@ export const Toolbar = ({hover}) => {
             })}
         >
             <div className="toolbar-btns">
-                <FormatButtonBold/>
-                <FormatButtonItalic/>
-                <FormatButtonUnderline/>
-                <FormatButtonStrikethrough/>
-
-                <LinkButton/>
-
-                <ToobarHoverExpandButton>
-                    <BlockButtonHeading level={2}/>
-                    <BlockButtonHeading level={3}/>
-                    <BlockButtonHeading level={4}/>
-                </ToobarHoverExpandButton>
-
-                <ToobarHoverExpandButton>
-                    <BlockButtonUnorderedList/>
-                    <BlockButtonOrderedList/>
-                    <BlockButtonArrowList/>
-                </ToobarHoverExpandButton>
-
-                <BlockButtonBlockquote/>
-
-                <ToobarHoverExpandButton>
-                    <AlignButtonLeft/>
-                    <AlignButtonCenter/>
-                    <AlignButtonRight/>
-                </ToobarHoverExpandButton>
-
-                <ToobarHoverExpandButton>
-                    <StorybookButton/>
-                    <InsertDividerButton/>
-                    <InsertGridButton/>
-                </ToobarHoverExpandButton>
-
+                <div className="flex grow">
+                    <FormatButtonBold/>
+                    <FormatButtonItalic/>
+                    <FormatButtonUnderline/>
+                    <FormatButtonStrikethrough/>
+
+                    <LinkButton/>
+
+                    <ToobarHoverExpandButton>
+                        <BlockButtonHeading level={2}/>
+                        <BlockButtonHeading level={3}/>
+                        <BlockButtonHeading level={4}/>
+                    </ToobarHoverExpandButton>
+
+                    <ToobarHoverExpandButton>
+                        <BlockButtonUnorderedList/>
+                        <BlockButtonOrderedList/>
+                        <BlockButtonArrowList/>
+                    </ToobarHoverExpandButton>
+
+                    <BlockButtonBlockquote/>
+
+                    <ToobarHoverExpandButton>
+                        <AlignButtonLeft/>
+                        <AlignButtonCenter/>
+                        <AlignButtonRight/>
+                    </ToobarHoverExpandButton>
+
+                    <ToobarHoverExpandButton>
+                        <StorybookButton/>
+                        <InsertDividerButton/>
+                        <InsertGridButton/>
+                    </ToobarHoverExpandButton>
+                </div>
+                {!!onSaveClick && <button className="!w-auto !border-0 !bg-green-600 !text-xs font-bold text-white hover:!bg-green-700" onClick={onSaveClick}>Änderungen speichern</button>}
             </div>
         </Menu>;
     }

package/src/dev/App.js

@@ -1,5 +1,6 @@
 import React, {useEffect} from 'react';
 import BlockEditor from "../BlockEditor";
+import Renderer from "../Renderer";
 // eslint-disable-next-line import/no-unresolved
 import "scss/demo.scss";
 import "./index.css";
@@ -53,6 +54,11 @@ function App() {
             </div>
             <div className="editor-demo-output">
                 <textarea value={JSON.stringify(value)}/>
+                <Renderer
+                    value={value}
+                    storybookComponentLoader={(block) => {
+                        return componentLoader(block);
+                    }}/>
             </div>
         </div>
     );

package/src/dev/testComponents/TestStory.js

@@ -1,9 +1,75 @@
 export default function TestStory({
-    title, ...props
+    title,
+    mvp,
+    ...props
 }) {
     return <div className="bg-green flex flex-col space-y-8 p-4 text-black">
         <h1>{title}</h1>
+        <div className="grid grid-cols-4">
+            <div className="border border-black p-4" data-teasermanager-slot="test-1">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam beatae consequatur consequuntur deserunt exercitationem fugit, magni necessitatibus pariatur quae quia, quisquam saepe sunt, tenetur!
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-2">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, obcaecati, unde! In labore nesciunt optio, possimus praesentium sunt temporibus vero.
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-3">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, rem, sapiente! At consequatur cum distinctio dolorem doloribus eligendi labore necessitatibus nemo officia, perspiciatis porro quisquam quos, saepe vitae voluptas. Eligendi?
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-4">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias beatae doloribus ex, impedit labore maxime perspiciatis quas. Alias aspernatur cupiditate, error impedit ipsa libero obcaecati reprehenderit sit sunt veniam.
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-5">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at consequatur cupiditate dolore, dolorem, eligendi et eum explicabo harum illum inventore maxime molestias porro quod recusandae, reiciendis repellat repudiandae saepe sint tempora tempore temporibus veniam voluptates. Dignissimos explicabo iusto reprehenderit.
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-6">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam beatae consequatur consequuntur deserunt exercitationem fugit, magni necessitatibus pariatur quae quia, quisquam saepe sunt, tenetur!
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-7">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, obcaecati, unde! In labore nesciunt optio, possimus praesentium sunt temporibus vero.
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-8">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, rem, sapiente! At consequatur cum distinctio dolorem doloribus eligendi labore necessitatibus nemo officia, perspiciatis porro quisquam quos, saepe vitae voluptas. Eligendi?
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-9">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias beatae doloribus ex, impedit labore maxime perspiciatis quas. Alias aspernatur cupiditate, error impedit ipsa libero obcaecati reprehenderit sit sunt veniam.
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-10">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at consequatur cupiditate dolore, dolorem, eligendi et eum explicabo harum illum inventore maxime molestias porro quod recusandae, reiciendis repellat repudiandae saepe sint tempora tempore temporibus veniam voluptates. Dignissimos explicabo iusto reprehenderit.
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-11">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam beatae consequatur consequuntur deserunt exercitationem fugit, magni necessitatibus pariatur quae quia, quisquam saepe sunt, tenetur!
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-12">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, obcaecati, unde! In labore nesciunt optio, possimus praesentium sunt temporibus vero.
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-13">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, rem, sapiente! At consequatur cum distinctio dolorem doloribus eligendi labore necessitatibus nemo officia, perspiciatis porro quisquam quos, saepe vitae voluptas. Eligendi?
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-14">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias beatae doloribus ex, impedit labore maxime perspiciatis quas. Alias aspernatur cupiditate, error impedit ipsa libero obcaecati reprehenderit sit sunt veniam.
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-15">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at consequatur cupiditate dolore, dolorem, eligendi et eum explicabo harum illum inventore maxime molestias porro quod recusandae, reiciendis repellat repudiandae saepe sint tempora tempore temporibus veniam voluptates. Dignissimos explicabo iusto reprehenderit.
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-16">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam beatae consequatur consequuntur deserunt exercitationem fugit, magni necessitatibus pariatur quae quia, quisquam saepe sunt, tenetur!
+            </div>
+        </div>
         <h2>Props</h2>
-        <div>{JSON.stringify(props)}</div>
+        {!!mvp && mvp.length > 0 && (
+            <ul>
+                {mvp.map(m => (
+                    <li key={m.feld1}>
+                        <b>{m.feld1}</b>:
+                        <span>{m.feld2}</span>
+                    </li>
+                ))}
+            </ul>
+        )}
+        <div>{JSON.stringify({
+            ...props,
+            mvp,
+            title,
+        })}</div>
     </div>;
 }