easy-email-extensions 3.0.9 → 3.0.10

package/lib/index2.js

@@ -55,7 +55,7 @@ var __async = (__this, __arguments, generator) => {
 };
 import * as React from "react";
 import React__default, { useCallback, useState, useRef, useEffect, useMemo, Children, isValidElement, cloneElement, createContext, useContext, Component, memo, forwardRef, useLayoutEffect, createRef, useImperativeHandle, PureComponent, useReducer, createElement, Suspense } from "react";
-import { IconFont, Stack as Stack$6, TextStyle, getBlockNodeByIdx, useBlock, getEditNode, getShadowRoot, FIXED_CONTAINER_ID, getEditContent, getEditorRoot, useEditorProps, useFocusIdx, useActiveTab, scrollBlockEleIntoView, useEditorContext, useHoverIdx, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, ActiveTabKeys } from "easy-email-editor";
+import { IconFont, Stack as Stack$6, TextStyle, getBlockNodeByIdx, useBlock, getEditNode, getShadowRoot, FIXED_CONTAINER_ID, getEditContent, getEditorRoot, useEditorProps, useEditorContext, useFocusIdx, scrollBlockEleIntoView, useHoverIdx, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, useActiveTab, ActiveTabKeys } from "easy-email-editor";
 import { BasicType, ImageManager, getIndexByIdx, getSiblingIdx, BlockManager, getPageIdx, getChildIdx, createBlockDataByType, getParentByIdx, getValueByIdx, MjmlToJson, JsonToMjml, getParentIdx, getNodeTypeFromClassName } from "easy-email-core";
 import { ReactSortable } from "react-sortablejs";
 import { useField, Field, useForm as useForm$1, Form as Form$3, version as version$2, useFormState } from "react-final-form";
@@ -38754,56 +38754,37 @@ function AutoComplete(props) {
     data: options2
   }));
 }
-const isMouseEvent = (event2) => !!(event2.type.indexOf("mouse") !== -1);
-const onDrag = ({
-  event: event2,
-  onMove,
-  onEnd
-}) => {
-  event2.preventDefault();
-  event2.stopPropagation();
-  let initX = 0;
-  let initY = 0;
-  if (isMouseEvent(event2)) {
-    initX = event2.clientX;
-    initY = event2.clientY;
-  } else {
-    initX = event2.touches[0].clientX;
-    initY = event2.touches[0].clientY;
-  }
-  const onDragMove = lodash.exports.debounce((mEvt) => {
-    let movX = 0;
-    let movY = 0;
-    if (isMouseEvent(mEvt)) {
-      movX = mEvt.clientX;
-      movY = mEvt.clientY;
-    } else {
-      movX = mEvt.touches[0].clientX;
-      movY = mEvt.touches[0].clientY;
+function awaitForElement(idx) {
+  let promiseObj = {
+    cancel: () => {
+    },
+    promise: Promise.resolve()
+  };
+  promiseObj.promise = new Promise((resolve) => {
+    const ele = getBlockNodeByIdx(idx);
+    if (ele) {
+      resolve(ele);
+      return;
     }
-    const diffX = movX - initX;
-    const diffY = movY - initY;
-    onMove(diffX, diffY);
+    const timer = setInterval(() => {
+      const ele2 = getBlockNodeByIdx(idx);
+      if (ele2) {
+        resolve(ele2);
+        clearInterval(timer);
+      }
+    }, 50);
+    promiseObj.cancel = () => {
+      clearInterval(timer);
+    };
   });
-  const onDragEnd = () => {
-    onEnd && onEnd();
-    document.removeEventListener("touchmove", onDragMove);
-    document.removeEventListener("touchend", onDragEnd);
-    document.removeEventListener("mousemove", onDragMove);
-    document.removeEventListener("mousemove", onDragEnd);
-  };
-  document.addEventListener("touchmove", onDragMove);
-  document.addEventListener("touchend", onDragEnd);
-  document.addEventListener("mousemove", onDragMove);
-  document.addEventListener("mouseup", onDragEnd);
-};
+  return promiseObj;
+}
 const ToolItem$1 = (props) => {
-  return /* @__PURE__ */ React__default.createElement(Button$4, {
+  return /* @__PURE__ */ React__default.createElement("button", {
+    className: "easy-email-extensions-emailToolItem",
     title: props.title,
-    size: "mini",
-    icon: props.icon,
     onClick: props.onClick
-  });
+  }, props.icon);
 };
 function getAnchorElement(node, matchLength) {
   var _a, _b;
@@ -38836,7 +38817,7 @@ function Link$1(props) {
   const initialValues = useMemo(() => {
     let link = "";
     let blank = true;
-    let underline = false;
+    let underline = true;
     let linkNode = getLinkNode(props.currentRange);
     if (linkNode) {
       link = linkNode.href;
@@ -38888,9 +38869,8 @@ function Link$1(props) {
         uncheckedText: "on",
         inline: true
       }))))
-    }), /* @__PURE__ */ React__default.createElement(Button$4, {
+    }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
       title: "Link",
-      size: "mini",
       icon: /* @__PURE__ */ React__default.createElement(IconFont, {
         iconName: "icon-link"
       })
@@ -38928,7 +38908,14 @@ function FontSizeList(props) {
       label: "48px"
     }
   ];
-  return /* @__PURE__ */ React__default.createElement(Menu$1, {
+  return /* @__PURE__ */ React__default.createElement("div", {
+    style: {
+      maxWidth: 150,
+      maxHeight: 350,
+      overflowY: "auto",
+      overflowX: "hidden"
+    }
+  }, /* @__PURE__ */ React__default.createElement(Menu$1, {
     onClickMenuItem: (item2) => {
       props.onChange(item2);
     },
@@ -38937,13 +38924,13 @@ function FontSizeList(props) {
   }, list2.map((item2) => /* @__PURE__ */ React__default.createElement(Menu$1.Item, {
     style: { lineHeight: "30px", height: 30 },
     key: item2.value
-  }, item2.label)));
+  }, item2.label))));
 }
 function FontFamily$1(props) {
   const { fontList: fontList2 = [] } = useEditorProps();
   return /* @__PURE__ */ React__default.createElement("div", {
     style: {
-      width: 100,
+      maxWidth: 150,
       maxHeight: 350,
       overflowY: "auto",
       overflowX: "hidden"
@@ -38953,7 +38940,7 @@ function FontFamily$1(props) {
       props.onChange(item2);
     },
     selectedKeys: [],
-    style: { border: "none" }
+    style: { border: "none", padding: 0 }
   }, fontList2.map((item2) => /* @__PURE__ */ React__default.createElement(Menu$1.Item, {
     style: { lineHeight: "30px", height: 30 },
     key: item2.value
@@ -38999,7 +38986,8 @@ const MergeTags$1 = React__default.memo((props) => {
     onSelect: (vals) => onSelect(vals[0])
   }));
 });
-function TextToolbar(props) {
+var styleText$1 = ".easy-email-extensions-Tools-Popover .arco-popover-content{padding:0}.easy-email-extensions-Tools-Popover .arco-popover-content-inner *::-webkit-scrollbar{-webkit-appearance:none;width:5px}.easy-email-extensions-Tools-Popover .arco-popover-content-inner *::-webkit-scrollbar-thumb{border-radius:5px;background-color:#00000080;box-shadow:0 0 1px #ffffff80;-webkit-box-shadow:0 0 1px rgba(255,255,255,.5)}\n";
+function Tools(props) {
   const { container: container2 } = props;
   const { mergeTags } = useEditorProps();
   const [selectionRange, setSelectionRange] = useState(null);
@@ -39065,47 +39053,60 @@ function TextToolbar(props) {
   };
   const getPopoverMountNode = () => document.getElementById(FIXED_CONTAINER_ID);
   return /* @__PURE__ */ React__default.createElement("div", {
-    id: "TextToolbar",
+    id: "Tools",
     style: { display: "flex", flexWrap: "nowrap" }
-  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
-    vertical: true,
-    spacing: "extraTight"
-  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
-    spacing: "extraTight"
-  }, /* @__PURE__ */ React__default.createElement(Tooltip$1, {
-    color: "#fff",
-    content: /* @__PURE__ */ React__default.createElement(FontFamily$1, {
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center"
+    }
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(Popover$1, {
+    className: "easy-email-extensions-Tools-Popover",
+    trigger: "click",
+    content: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", null, styleText$1), /* @__PURE__ */ React__default.createElement(FontFamily$1, {
       onChange: (val) => execCommand("fontName", val)
-    }),
+    })),
     getPopupContainer: getPopoverMountNode
-  }, /* @__PURE__ */ React__default.createElement(Button$4, {
-    size: "mini",
+  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    title: "font family",
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-font-family"
     })
-  })), /* @__PURE__ */ React__default.createElement(Tooltip$1, {
+  })), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(Popover$1, {
+    className: "easy-email-extensions-Tools-Popover",
     color: "#fff",
-    content: /* @__PURE__ */ React__default.createElement(FontSizeList, {
+    trigger: "click",
+    content: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", null, styleText$1), /* @__PURE__ */ React__default.createElement(FontSizeList, {
       onChange: (val) => execCommand("fontSize", val)
-    }),
+    })),
     getPopupContainer: getPopoverMountNode
-  }, /* @__PURE__ */ React__default.createElement(Button$4, {
-    size: "mini",
+  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    title: "line-height",
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-line-height"
     })
-  })), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+  })), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
     onClick: () => execCommand("bold"),
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-bold"
     }),
     title: "Bold"
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
   }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
     onClick: () => execCommand("italic"),
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-italic"
     }),
     title: "Italic"
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
   }), /* @__PURE__ */ React__default.createElement(ColorPicker, {
     label: "",
     position: "tl",
@@ -39117,7 +39118,9 @@ function TextToolbar(props) {
       iconName: "icon-font-color"
     }),
     title: "Text color"
-  })), /* @__PURE__ */ React__default.createElement(ColorPicker, {
+  })), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(ColorPicker, {
     label: "",
     showInput: false,
     position: "tl",
@@ -39128,10 +39131,14 @@ function TextToolbar(props) {
       iconName: "icon-bg-colors"
     }),
     title: "Background color"
-  })), /* @__PURE__ */ React__default.createElement(Link$1, {
+  })), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(Link$1, {
     currentRange: selectionRange,
     onChange: (values2) => execCommand("createLink", values2),
     getPopupContainer: getPopoverMountNode
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
   }), mergeTags && /* @__PURE__ */ React__default.createElement(Tooltip$1, {
     color: "#fff",
     position: "bottom",
@@ -39140,21 +39147,14 @@ function TextToolbar(props) {
       onChange: (val) => execCommand("insertHTML", val)
     }),
     getPopupContainer: getPopoverMountNode
-  }, /* @__PURE__ */ React__default.createElement(Button$4, {
-    size: "mini",
+  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
     title: "Merge tag",
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-merge-tags"
     })
-  })), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    onClick: () => execCommand("removeFormat"),
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-close"
-    }),
-    title: "Remove format"
-  })), /* @__PURE__ */ React__default.createElement(Stack$6, {
-    spacing: "extraTight"
-  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+  })), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
     onClick: () => execCommand("justifyLeft"),
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-align-left"
@@ -39172,6 +39172,8 @@ function TextToolbar(props) {
       iconName: "icon-align-right"
     }),
     title: "Align right"
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
   }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
     onClick: () => execCommand("insertOrderedList"),
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
@@ -39184,6 +39186,8 @@ function TextToolbar(props) {
       iconName: "icon-list-ul"
     }),
     title: "Unorderlist"
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
   }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
     onClick: () => execCommand("strikeThrough"),
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
@@ -39202,77 +39206,109 @@ function TextToolbar(props) {
       iconName: "icon-line"
     }),
     title: "Line"
-  }))));
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    onClick: () => execCommand("removeFormat"),
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-close"
+    }),
+    title: "Remove format"
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  })));
 }
-const TEXT_BAR_LOCATION_KEY = "TEXT_BAR_LOCATION_KEY";
-const RichTextFieldItem = (props) => {
-  const { activeTab } = useActiveTab();
-  const isActive = activeTab === "EDIT";
-  const [position, setPosition] = useState({ top: 0, left: 0 });
-  const [locationState, setLocationState] = useLocalStorage$1(TEXT_BAR_LOCATION_KEY, { left: 0, top: 0 });
-  const { idx } = props;
-  const container2 = getBlockNodeByIdx(idx);
+var styleText = ".easy-email-extensions-emailToolItem{display:inline-flex;position:relative;outline:none;font-weight:400;appearance:none;cursor:pointer!important;white-space:nowrap;transition:all .1s linear;box-sizing:border-box;line-height:1.5715;border:none;background-color:transparent;color:#fff}.easy-email-extensions-divider{position:relative;display:inline-flex;width:1px;height:16px;background-color:#808080e6}\n";
+function RichTextToolBar() {
+  const [direction, setDirection] = useState("top");
+  const [blockNode, setBlockNode] = useState(null);
+  const [offsetX, setOffsetX] = useState(0);
+  const { focusBlock: focusBlock2 } = useBlock();
+  const { pageData: pageData2 } = useEditorContext();
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  const pageWidth = +(pageData2.attributes.width || "600").replace("px", "");
   useEffect(() => {
-    const fixContainer = getEditorRoot();
-    if (fixContainer && idx) {
-      const { left, top } = fixContainer.getBoundingClientRect();
-      setPosition({
-        left: (locationState == null ? void 0 : locationState.left) || left,
-        top: (locationState == null ? void 0 : locationState.top) || top - 46
-      });
-    }
-  }, [idx, locationState == null ? void 0 : locationState.left, locationState == null ? void 0 : locationState.top]);
-  const onChange = useCallback(() => {
-  }, []);
-  const editorContainer = container2 && getEditNode(container2);
-  const textToolbar = useMemo(() => {
-    const onMoveTextToolbar = (event2) => {
-      onDrag({
-        event: event2,
-        onMove(x, y) {
-          setPosition({
-            left: position.left + x,
-            top: position.top + y
-          });
-          setLocationState({
-            left: position.left + x,
-            top: position.top + y
-          });
-        },
-        onEnd() {
-        }
-      });
+    const promiseObj = awaitForElement(focusIdx2);
+    promiseObj.promise.then((blockNode2) => {
+      setBlockNode(blockNode2);
+    });
+    return () => {
+      promiseObj.cancel();
     };
-    return createPortal(/* @__PURE__ */ React__default.createElement("div", {
-      key: idx,
-      style: __spreadProps(__spreadValues({
-        position: "fixed"
-      }, position), {
-        transform: "translate(0,-100%)",
-        padding: 16,
-        boxSizing: "border-box",
-        zIndex: 100,
-        display: Boolean(isActive) ? void 0 : "none"
-      })
-    }, /* @__PURE__ */ React__default.createElement("div", {
-      style: {
-        position: "absolute",
-        backgroundColor: "#41444d",
-        height: "100%",
-        width: "100%",
-        left: 0,
-        top: 0,
-        cursor: "move"
-      },
-      onMouseDown: onMoveTextToolbar
-    }), /* @__PURE__ */ React__default.createElement("div", {
-      style: { position: "relative", zIndex: 1 }
-    }, /* @__PURE__ */ React__default.createElement(TextToolbar, {
-      container: editorContainer,
-      onChange
-    }))), document.getElementById(FIXED_CONTAINER_ID));
-  }, [idx, position, isActive, editorContainer, onChange, setLocationState]);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(InlineTextField, __spreadValues({}, props)), editorContainer && textToolbar);
+  }, [focusIdx2, focusBlock2]);
+  useEffect(() => {
+    if (blockNode) {
+      const options2 = {
+        rootMargin: "-84px 0px 0px 0px",
+        root: getShadowRoot().firstChild,
+        threshold: [0, 1e-3, 0.1, 0.999, 0.8, 0.9, 1]
+      };
+      const checkDirection = (ev) => {
+        const [current] = ev;
+        const { top } = current.intersectionRect;
+        const boundingClientRect = current.boundingClientRect;
+        const rootBounds = current.rootBounds;
+        const intersectionRatio = current.intersectionRatio;
+        if (!rootBounds)
+          return;
+        const paddingLeft = (rootBounds.width - pageWidth) / 2;
+        const offsetLeft = boundingClientRect.left - rootBounds.left;
+        setOffsetX(paddingLeft - offsetLeft);
+        if (intersectionRatio === 1) {
+          setDirection("top");
+        } else {
+          if (top) {
+            if (top > rootBounds.top) {
+              setDirection("top");
+            } else {
+              setDirection("bottom");
+            }
+          }
+        }
+      };
+      const observer = new IntersectionObserver(checkDirection, options2);
+      observer.observe(blockNode);
+      return () => {
+        observer.unobserve(blockNode);
+      };
+    }
+  }, [blockNode, pageWidth]);
+  if (!blockNode)
+    return null;
+  const editorContainer = blockNode && getEditNode(blockNode);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, createPortal(/* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", {
+    dangerouslySetInnerHTML: { __html: styleText }
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    style: {
+      transform: direction === "top" ? "translate(0,-100%)" : void 0,
+      padding: "4px 8px",
+      boxSizing: "border-box",
+      position: "absolute",
+      zIndex: 100,
+      top: direction === "top" ? -40 : "calc(100% + 40px)",
+      left: offsetX,
+      width: pageWidth
+    }
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    style: {
+      position: "absolute",
+      backgroundColor: "#41444d",
+      height: "100%",
+      width: "100%",
+      left: 0,
+      top: 0,
+      cursor: "move"
+    }
+  }), /* @__PURE__ */ React__default.createElement(Tools, {
+    container: editorContainer,
+    onChange: () => {
+    }
+  }))), blockNode));
+}
+const TEXT_BAR_LOCATION_KEY = "TEXT_BAR_LOCATION_KEY";
+const RichTextFieldItem = (props) => {
+  useLocalStorage$1(TEXT_BAR_LOCATION_KEY, { left: 0, top: 0 });
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(RichTextToolBar, null), /* @__PURE__ */ React__default.createElement(InlineTextField, __spreadValues({}, props)));
 };
 const RichTextField = (props) => {
   const { focusBlock: focusBlock2 } = useBlock();
@@ -43999,7 +44035,6 @@ const BlocksPanel = (props) => {
     tabPosition: "left",
     size: "large"
   }, filterCategories.map((category, index2) => /* @__PURE__ */ React__default.createElement(Tabs$1.TabPane, {
-    className: "no-scrollbar",
     style: {
       padding: 0,
       overflow: "auto"
@@ -44186,31 +44221,6 @@ function SourceCodePanel() {
     onBlur: onMjmlChange
   })));
 }
-function awaitForElement(idx) {
-  let promiseObj = {
-    cancel: () => {
-    },
-    promise: Promise.resolve()
-  };
-  promiseObj.promise = new Promise((resolve) => {
-    const ele = getBlockNodeByIdx(idx);
-    if (ele) {
-      resolve(ele);
-      return;
-    }
-    const timer = setInterval(() => {
-      const ele2 = getBlockNodeByIdx(idx);
-      if (ele2) {
-        resolve(ele2);
-        clearInterval(timer);
-      }
-    }, 50);
-    promiseObj.cancel = () => {
-      clearInterval(timer);
-    };
-  });
-  return promiseObj;
-}
 function Toolbar({
   block: block2,
   direction
@@ -44323,22 +44333,27 @@ function FocusTooltip() {
   useEffect(() => {
     if (blockNode) {
       const options2 = {
-        rootMargin: "-24px 0px -24px 0px",
-        root: getShadowRoot().host,
-        threshold: [0, 1e-3, 0.1, 0.999, 0.9, 1]
+        rootMargin: "-24px 0px 0px 0px",
+        root: getShadowRoot().firstChild,
+        threshold: [0, 1e-3, 0.1, 0.5, 0.999, 1]
       };
       const checkDirection = (ev) => {
         const [current] = ev;
-        const { top, bottom } = current.intersectionRect;
+        const { top } = current.intersectionRect;
         const rootBounds = current.rootBounds;
+        const intersectionRatio = current.intersectionRatio;
         if (!rootBounds)
           return;
-        if (rootBounds.bottom === bottom) {
+        if (intersectionRatio === 1) {
           setDirection("top");
-        } else if (rootBounds.top === top) {
-          setDirection("bottom");
         } else {
-          setDirection("top");
+          if (top) {
+            if (top > rootBounds.top) {
+              setDirection("top");
+            } else {
+              setDirection("bottom");
+            }
+          }
         }
       };
       const observer = new IntersectionObserver(checkDirection, options2);