@vonaffenfels/slate-editor 1.0.52 → 1.0.53

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.0.52",
+    "version": "1.0.53",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -71,7 +71,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "41eb9767f8c80645382c0d77eae03bcefaac6fe4",
+    "gitHead": "2dc913432ea48a4eaf107ff9c5f15b572eeda4d6",
     "publishConfig": {
         "access": "public"
     }

package/scss/editor.scss

@@ -11,6 +11,12 @@
   max-width: 100%;
   width: 100%;
 
+  .slate-editor-element-selected {
+    .storybook-element-component {
+      outline: 2px dashed #61a2e9;
+    }
+  }
+
   &.storybook-active {
     .slate-editor {
       display: none;
@@ -416,18 +422,20 @@
   .resizable-left {
     position: relative;
   }
+
   .resizable-right {
     position: relative;
   }
+
   .resizable-x-handle {
-      cursor: ew-resize;
-      content: "";
-      position: absolute;
-      height: 100%;
-      width: 10px;
-      text-align: center;
-      top: 0;
-      left: -2px;
-      background-color: transparent;
+    cursor: ew-resize;
+    content: "";
+    position: absolute;
+    height: 100%;
+    width: 10px;
+    text-align: center;
+    top: 0;
+    left: -2px;
+    background-color: transparent;
   }
 }

package/scss/storybook.scss

@@ -9,7 +9,7 @@
     z-index: 10;
     background-color: rgba(255, 255, 255, 0.7);
     color: black;
-    font-size: 2em;
+    font-size: 1em;
     align-items: center;
     justify-content: center;
     content-visibility: auto;
@@ -131,4 +131,10 @@
     min-height: 100px;
     min-width: 100px;
   }
+}
+
+@container (min-width: 100px) {
+  .storybook-element-component-overlay {
+    font-size: 2em;
+  }
 }

package/src/BlockEditor.js

@@ -45,6 +45,15 @@ export default function BlockEditor({
                 let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
                 let path = ReactEditor.findPath(editor, node);
 
+                document.querySelectorAll(".slate-editor-element-selected").forEach(el => {
+                    el.classList.remove("slate-editor-element-selected");
+                });
+
+                if (attributes.ref.current) {
+                    attributes.ref.current.classList.add("slate-editor-element-selected");
+                }
+
+
                 setSelectedStorybookElement({
                     ...element,
                     editorAttributes: attributes,
@@ -170,10 +179,14 @@ export default function BlockEditor({
             block: newStorybookElement.block,
             isEmpty: false,
             isInline: selectedStorybookElement.isInline,
-            attributes: newStorybookElement.attributes || {},
+            attributes: {...(newStorybookElement.attributes || {})},
             type: "storybook",
         };
 
+        if (!newNodeProps.attributes.teasermanagerSlotId) {
+            newNodeProps.attributes.teasermanagerSlotId = ObjectId();
+        }
+
         Transforms.setNodes(editor, newNodeProps, {at: selectedStorybookElement.path});
 
         onSlateChange(editor.children);
@@ -183,10 +196,6 @@ export default function BlockEditor({
             ...newNodeProps,
         };
 
-        if (!mergedValue.attributes.teasermanagerSlotId) {
-            mergedValue.attributes.teasermanagerSlotId = ObjectId();
-        }
-
         setSelectedStorybookElement(mergedValue);
     };
 

package/src/SidebarEditor/Resizable.js

@@ -29,17 +29,19 @@ export const Resizable = ({left, right}) => {
             }
 
             const onMouseDown = (e) => {
+                if (!rightRef.current) {
+                    return;
+                }
                 rightRef.current.resizingStartWidth = rightRef.current.getBoundingClientRect().width;
                 rightRef.current.resizingStartMouseX = e.pageX;
                 rightRef.current.resizing = true;
             };
             const onMouseMove = (e) => {
-                if (!rightRef.current.resizing) {
+                if (!rightRef?.current?.resizing) {
                     return;
                 }
 
                 let newWidth = rightRef.current.resizingStartWidth - (e.pageX - rightRef.current.resizingStartMouseX)
-
                 newWidth = checkWidth(newWidth);
 
                 localStorage.setItem("slate-editor-resizable-width", newWidth);
@@ -47,7 +49,9 @@ export const Resizable = ({left, right}) => {
                 rightRef.current.style.width = newWidth + 'px';
             }
             const onMouseUp = (e) => {
-                rightRef.current.resizing = false;
+                if (rightRef.current) {
+                    rightRef.current.resizing = false;
+                }
             }
 
             rightRef.current.addEventListener("mousedown", onMouseDown);
@@ -55,7 +59,9 @@ export const Resizable = ({left, right}) => {
             document.addEventListener("mouseup", onMouseUp);
 
             return () => {
-                rightRef.current.removeEventListener("mousedown", onMouseDown);
+                if (rightRef.current) {
+                    rightRef.current.removeEventListener("mousedown", onMouseDown);
+                }
                 document.removeEventListener("mousemove", onMouseMove);
                 document.removeEventListener("mouseup", onMouseUp);
             }