@vonaffenfels/slate-editor 1.1.12 → 1.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.1.12",
+    "version": "1.1.14",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -72,7 +72,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "772f1444de93f6949ce340b13bc24665493d5ef1",
+    "gitHead": "105cece6edc0d564f2c1af57a0516f9f99f82e33",
     "publishConfig": {
         "access": "public"
     }

package/src/Blocks/LayoutSlot.js

@@ -5,6 +5,8 @@ import {Transforms} from "slate";
 import {ReactEditor} from "slate-react";
 import classNames from "classnames";
 import {ToolMargin} from "../Tools/Margin";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faStickyNote} from "@fortawesome/free-solid-svg-icons";
 
 export const LayoutSlotContext = createContext({isInSlot: false});
 
@@ -28,6 +30,25 @@ export const LayoutSlot = ({
         }, {at: path});
     };
 
+    const switchSticky = () => {
+        let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
+        let path = ReactEditor.findPath(editor, node);
+        let stickyTop = element?.attributes?.stickyTop;
+
+        if (!element.attributes.sticky) {
+            stickyTop = prompt("Abstand nach oben, wenn sticky", element?.attributes?.stickyTop || 0);
+        }
+
+        Transforms.setNodes(editor, {
+            type: "layout-slot",
+            attributes: {
+                ...(element.attributes || {}),
+                sticky: !element.attributes.sticky,
+                stickyTop: stickyTop || 0,
+            },
+        }, {at: path});
+    };
+
     return <div
         className={classNames({
             ["layout-slot layout-slot-" + element.attributes.name]: true,
@@ -51,10 +72,19 @@ export const LayoutSlot = ({
                     {element.attributes.name}
                 </span>
 
-                <ToolMargin margin={element?.attributes?.margin} onChange={onMarginChange}/>
+                <div className="flex items-center">
+                    {!element?.attributes?.sticky ? (
+                        <FontAwesomeIcon icon={faStickyNote} color="#000000" size="md" className="mr-2 cursor-pointer" onClick={switchSticky} />
+                    ) : (
+                        <FontAwesomeIcon icon={faStickyNote} color="#3490f3" size="md" className="mr-2 cursor-pointer" onClick={switchSticky} />
+                    )}
+                    <ToolMargin margin={element?.attributes?.margin} onChange={onMarginChange}/>
+                </div>
             </div>
             <div className="layout-slot-content">
-                {children}
+                <div className={classNames({"sticky top-[80px]": element?.attributes?.sticky})}>
+                    {children}
+                </div>
             </div>
         </LayoutSlotContext.Provider>
     </div>;

package/src/Serializer/Serializer.js

@@ -177,8 +177,13 @@ export function Serializer({
                             "md:ml-4": props.attributes?.margin?.left,
                         })}
                     >
-                        {props.children.map((v, i) => <Fragment
-                            key={"layout-slot-" + i}>{serializeNode(v, i, props.attributes.name)}</Fragment>)}
+                        <div
+                            style={{top: props.attributes?.sticky && "80px"}}
+                            className={classNames({"sticky": props.attributes?.sticky})}>
+                            {props.children.map((v, i) => <div
+                                key={"layout-slot-" + i}
+                            >{serializeNode(v, i, props.attributes.name)}</div>)}
+                        </div>
                     </div>
                 </Wrapper>;
             default: {