@vonaffenfels/slate-editor 1.1.36 → 1.1.39

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.1.36",
+    "version": "1.1.39",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -72,7 +72,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "c55640e4184996f5503928a6e1f990c3b4420a52",
+    "gitHead": "5039c3a8ae4e6e90f31a2e832f55dc3e02fcb190",
     "publishConfig": {
         "access": "public"
     }

package/scss/sidebarEditor.scss

@@ -28,6 +28,7 @@
 
     input[type="text"],
     input[type="time"],
+    input[type="date"],
     input[type="number"],
     input[type="color"],
     input[type="datetime-local"],

package/src/Nodes/Element.js

@@ -37,6 +37,7 @@ export const Element = ({
     switch (props.element.type) {
         case 'storybook':
             return <div
+                id={props?.element?.attributes?.id}
                 onClick={e => e.stopPropagation()}
                 className={"storybook-element-wrapper"}>
                 <StorybookNode

package/src/Nodes/Storybook.js

@@ -144,6 +144,9 @@ const StorybookNodeComponent = ({
                     title="Klicken, um das Element zu konfigurieren"
                     onClick={onEditClick}>
                     <div className="absolute right-0 top-0 m-2">
+                        <span className="mr-2">
+                            {[element?.attributes?.visibleFromDate, element?.attributes?.visibleToDate].filter(Boolean).map((date) => new Date(date).toLocaleString?.()).join(" - ")}
+                        </span>
                         <FontAwesomeIcon
                             icon={faDesktop}
                             color={element?.attributes?.hideOnDesktop ? "lightgray" : "black"}

package/src/Nodes/StorybookDisplay.js

@@ -36,6 +36,16 @@ export const StorybookDisplay = (props) => {
         };
     }, [elRef.current]);
 
+    let currentDate = new Date();
+
+    if (!isEditor && element?.attributes?.visibleFromDate && new Date(element?.attributes?.visibleFromDate) > currentDate) {
+        return;
+    }
+
+    if (!isEditor && element?.attributes?.visibleToDate && new Date(element?.attributes?.visibleToDate) < currentDate) {
+        return;
+    }
+
     if (element.isEmpty || !element.block) {
         return <EmptyBlock {...element.attributes} />;
     }

package/src/SidebarEditor/Fields/DateTime.js

@@ -0,0 +1,55 @@
+import classNames from "classnames";
+
+export const DateTime = ({
+    value,
+    onChange,
+    className,
+    inline,
+    ...props
+}) => {
+    // Separate date and time values
+    const dateValue = value ? value.split("T")[0] : "";
+    const timeValue = value ? value.split("T")[1] : "";
+
+    // Handle changes for date and time inputs
+    const handleDateChange = (e) => {
+        const newDate = e.target.value;
+        const newDateTime = `${newDate}T${timeValue || "00:00"}`;
+        onChange(newDateTime);
+    };
+
+    const handleTimeChange = (e) => {
+        const newTime = e.target.value;
+        const newDateTime = `${dateValue || "1970-01-01"}T${newTime}`;
+        onChange(newDateTime);
+    };
+
+    return (
+        <div className={classNames(className, "grid gap-2", {
+            "grid-cols-2": inline,
+            "grid-cols-1": !inline,
+        })}>
+            {/* Date input */}
+            <input
+                type="date"
+                className="w-full"
+                value={dateValue}
+                onChange={handleDateChange}
+                {...props}
+            />
+
+            {/* Time input */}
+            <input
+                type="time"
+                className="w-full"
+                value={timeValue}
+                onChange={handleTimeChange}
+                {...props}
+            />
+
+            {!!value && (
+                <button className="button button--tertiary" onClick={() => onChange(undefined)}>Zurücksetzen</button>
+            )}
+        </div>
+    );
+};

package/src/SidebarEditor.js

@@ -9,6 +9,7 @@ import {
     CollapsableMenu, CollapsableMenuItem,
 } from "./CollapsableMenu/CollapsableMenu";
 import {Switch} from "./SidebarEditor/Fields/Switch";
+import {DateTime} from "./SidebarEditor/Fields/DateTime";
 
 const SidebarEditor = ({
     sdk,
@@ -379,7 +380,7 @@ const SidebarEditor = ({
                                                     hinzufügen</CollapsableMenuItem>
                                                 <CollapsableMenuItem onClick={handleInfoClick}>Info</CollapsableMenuItem>
                                                 <div className="px-4 pb-2 pt-1">
-                                                    <b className="mb-1 block text-sm">Sichtbar auf:</b>
+                                                    <b className="mb-1 block text-sm">Sichtbarkeit</b>
                                                     <Switch
                                                         value={!storybookElement.attributes.hideOnDesktop}
                                                         label="Desktop"
@@ -395,6 +396,10 @@ const SidebarEditor = ({
                                                         label="Smartphone"
                                                         className="mb-2"
                                                         onClick={() => handleFieldValueChange("hideOnSmartphone", !storybookElement.attributes.hideOnSmartphone)}/>
+                                                    <label className="mb-1 block">Sichtbar von</label>
+                                                    <DateTime className="mb-2" value={storybookElement.attributes.visibleFromDate} onChange={v => handleFieldValueChange("visibleFromDate", v)} />
+                                                    <label className="mb-1 block">Sichtbar bis</label>
+                                                    <DateTime className="mb-2" value={storybookElement.attributes.visibleToDate} onChange={v => handleFieldValueChange("visibleToDate", v)} />
                                                 </div>
                                             </CollapsableMenu>
                                         </div>

package/src/Toolbar/Anchor.js

@@ -0,0 +1,95 @@
+import {
+    ReactEditor, useSlate,
+} from "slate-react";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import React, {
+    useEffect, useState,
+} from "react";
+import classNames from "classnames";
+import {
+    Editor, Transforms, Element as SlateElement, Range, Node,
+} from "slate";
+import {
+    faAnchor, faLink,
+} from "@fortawesome/free-solid-svg-icons";
+
+export const AnchorButtonElement = ({
+    icon,
+    children,
+}) => {
+    const editor = useSlate();
+
+    const [anchor, setAnchor] = useState("");
+    const [node, setNode] = useState(undefined);
+
+    useEffect(() => {
+        if (editor?.selection?.anchor?.path?.[0] !== undefined) {
+            let node = Node.get(editor, [editor?.selection?.anchor?.path?.[0]]);
+
+            setAnchor(node?.attributes?.id || "");
+            setNode(node);
+        }
+    }, [editor?.selection?.anchor?.path?.[0], editor]);
+
+    const apply = (value) => {
+        // Node.get could return editor itself
+        if (!node?.type) {
+            return;
+        }
+
+        let path = ReactEditor.findPath(editor, node);
+
+        let newNode = {
+            ...node,
+            attributes: {
+                ...node.attributes,
+                id: anchor,
+            },
+        };
+
+        setNode(newNode);
+
+        Transforms.setNodes(editor, newNode, {at: path});
+    };
+
+    const reset = () => {
+        apply("");
+
+        return;
+    };
+
+    return (
+        <span
+            className={
+                classNames({
+                    "toolbar-btn": true,
+                    "active": node?.attributes?.id,
+                })
+            }
+        >
+            {!!icon && <FontAwesomeIcon icon={icon} />}
+            {children}
+            <span className="toolbar-btn-config">
+                <span className="toolbar-btn-config-inner">
+                    <span className="toolbar-btn-config-row">
+                        <label className="toolbar-form-label">
+                            Ankername
+                        </label>
+                        <span className="toolbar-form-input">
+                            <input type="text" value={anchor} onChange={(e) => setAnchor(e.target.value)}/>
+                        </span>
+                    </span>
+                    <span className="toolbar-btn-config-row">
+                        <span className="toolbar-btn" onMouseDown={() => apply(anchor)}>Apply</span>
+                        {node?.attributes?.id && <span className="toolbar-btn" onMouseDown={reset}>Remove</span>}
+                    </span>
+                </span>
+            </span>
+        </span>
+    );
+};
+
+
+export const AnchorButton = () => {
+    return <AnchorButtonElement icon={faAnchor}/>;
+};

package/src/Toolbar/Toolbar.js

@@ -25,6 +25,7 @@ import {
 } from "@contentful/forma-36-react-components";
 import {Transforms} from "slate";
 import {ElementAutocomplete} from "../ElementAutocomplete";
+import {AnchorButton} from "./Anchor";
 
 export const Portal = ({children}) => {
     return ReactDOM.createPortal(children, window.document.body);
@@ -166,6 +167,8 @@ export const Toolbar = ({
                             <AlignButtonRight/>
                         </ToobarHoverExpandButton>
 
+                        <AnchorButton />
+
                         <ToobarHoverExpandButton>
                             <InsertDividerButton/>
                             <InsertGridButton/>