@vonaffenfels/slate-editor 1.1.11 → 1.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.1.11",
+    "version": "1.1.13",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -72,7 +72,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "840a8741f2c0e62c54c4039a68a0e103c3041322",
+    "gitHead": "7ac51bec76cbf6f02661849c5836c874c4a1a3a6",
     "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,10 @@ 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>)}
+                        {props.children.map((v, i) => <div
+                            key={"layout-slot-" + i}
+                            style={{top: props.attributes?.sticky && "80px"}}
+                            className={classNames({"sticky": props.attributes?.sticky})}>{serializeNode(v, i, props.attributes.name)}</div>)}
                     </div>
                 </Wrapper>;
             default: {

package/src/Toolbar/Toolbar.js

@@ -2,9 +2,8 @@ import ReactDOM from "react-dom";
 import React, {
     useEffect, useRef, useState,
 } from "react";
-import {
-    ReactEditor, useSlate,
-} from "slate-react";
+import {ReactEditor} from "slate-react";
+import {Node} from "slate";
 import classNames from "classnames";
 // eslint-disable-next-line import/no-unresolved
 import "scss/toolbar.scss";
@@ -106,7 +105,24 @@ export const Toolbar = ({
             },
         };
 
-        Transforms.insertNodes(editor, [element], {at: [lastSelection?.anchor?.path?.[0]]});
+        if (lastSelection?.anchor?.path?.length) {
+            lastSelection.anchor.path.forEach((p, i) => {
+                let slicedPath = lastSelection.anchor.path.slice(0, i + 1);
+                let node = Node.get(editor, slicedPath);
+
+                // Wenn Paragraph, dann auf die Ebene des Paragraphen
+                if (node.type === "paragraph") {
+                    Transforms.insertNodes(editor, [element], {at: slicedPath});
+
+                    return;
+                }
+
+                // Wenn vorletzter Anchor, dann einfügen (letzter ist column, keine row)
+                if (i === lastSelection.anchor.path.length - 2) {
+                    Transforms.insertNodes(editor, [element], {at: slicedPath});
+                }
+            });
+        }
     };
 
     function renderMenu() {