easy-email-extensions 3.1.23 → 3.1.28

package/lib/InteractivePrompt/components/Toolbar.d.ts

@@ -1,5 +1 @@
-import { IBlock } from 'easy-email-core';
-export declare function Toolbar({ block, blockNode, }: {
-    block: IBlock;
-    blockNode: HTMLElement;
-}): JSX.Element;
+export declare function Toolbar(): JSX.Element | null;

package/lib/index.d.ts

@@ -7,3 +7,4 @@ export * from './InteractivePrompt';
 export * from './SimpleLayout';
 export * from './components/Form';
 export { getContextMergeTags } from './utils/getContextMergeTags';
+export { getIconNameByBlockType } from './utils/getIconNameByBlockType';

package/lib/index.js

@@ -1,4 +1,4 @@
-export { b as Align, A as AttributePanel, d as AttributesPanelWrapper, Z as AutoCompleteField, h as Background, k as BackgroundColor, a as BlockAttributeConfigurationManager, B as BlockLayer, v as BlockMarketManager, w as BlockMaskWrapper, n as Border, o as BorderColor, r as BorderStyle, t as BorderWidth, a1 as CheckboxField, C as Color, Q as ColorPickerField, e as ContainerBackgroundColor, a0 as DatePickerField, D as Decoration, l as Direction, a2 as EditTabField, F as FontFamily, p as FontSize, s as FontStyle, u as FontWeight, H as Height, R as ImageUploaderField, a3 as InlineTextField, E as InputWithUnitField, I as InteractivePrompt, L as LetterSpacing, i as LineHeight, m as Link, M as Margin, q as MergeTags, N as NavbarLinkPadding, K as NumberField, P as Padding, _ as RadioGroupField, a5 as RichTextField, G as SearchField, X as SelectField, S as ShortcutToolbar, y as SimpleLayout, O as SliderField, x as SourceCodePanel, $ as SwitchField, T as TextAlign, J as TextAreaField, f as TextDecoration, z as TextField, j as TextTransform, Y as TreeSelectField, U as UploadField, V as VerticalAlign, W as Width, a4 as enhancer, g as getContextMergeTags } from "./index2.js";
+export { d as Align, A as AttributePanel, e as AttributesPanelWrapper, _ as AutoCompleteField, i as Background, l as BackgroundColor, b as BlockAttributeConfigurationManager, B as BlockLayer, w as BlockMarketManager, x as BlockMaskWrapper, o as Border, p as BorderColor, s as BorderStyle, u as BorderWidth, a2 as CheckboxField, C as Color, R as ColorPickerField, f as ContainerBackgroundColor, a1 as DatePickerField, D as Decoration, m as Direction, a3 as EditTabField, F as FontFamily, q as FontSize, t as FontStyle, v as FontWeight, H as Height, X as ImageUploaderField, a4 as InlineTextField, G as InputWithUnitField, I as InteractivePrompt, L as LetterSpacing, j as LineHeight, n as Link, M as Margin, r as MergeTags, N as NavbarLinkPadding, O as NumberField, P as Padding, $ as RadioGroupField, a6 as RichTextField, J as SearchField, Y as SelectField, S as ShortcutToolbar, z as SimpleLayout, Q as SliderField, y as SourceCodePanel, a0 as SwitchField, T as TextAlign, K as TextAreaField, h as TextDecoration, E as TextField, k as TextTransform, Z as TreeSelectField, U as UploadField, V as VerticalAlign, W as Width, a5 as enhancer, g as getContextMergeTags, a as getIconNameByBlockType } from "./index2.js";
 import "react";
 import "easy-email-editor";
 import "easy-email-core";

package/lib/index2.js

@@ -55,12 +55,12 @@ var __async = (__this, __arguments, generator) => {
 };
 import * as React from "react";
 import React__default, { Children, isValidElement, cloneElement, createContext, useContext, Component, useMemo, memo, forwardRef, useEffect, useRef, useLayoutEffect, useState, createRef, useImperativeHandle, PureComponent, useCallback, useReducer, Fragment, createElement, Suspense } from "react";
-import { IconFont, useEditorProps, Stack as Stack$6, getBlockNodeByIdx, useBlock, getEditNode, getEditContent, useFocusIdx, TextStyle, useEditorContext, getShadowRoot, FIXED_CONTAINER_ID, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, getEditorRoot, useActiveTab, ActiveTabKeys } from "easy-email-editor";
+import { IconFont, useEditorProps, Stack as Stack$6, getBlockNodeByIdx, useBlock, getEditNode, getEditContent, TextStyle, useFocusIdx, useEditorContext, getShadowRoot, FIXED_CONTAINER_ID, useFocusBlockLayout, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, useRefState, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, getEditorRoot, useActiveTab, ActiveTabKeys } from "easy-email-editor";
 import { BasicType, ImageManager, BlockManager, getParentIdx, createBlockDataByType, getParentByIdx, getValueByIdx, getIndexByIdx, getSiblingIdx, getNodeIdxFromClassName, getNodeIdxClassName, getPageIdx, getChildIdx, MjmlToJson, JsonToMjml, getNodeTypeFromClassName } from "easy-email-core";
 import ReactDOM, { findDOMNode, createPortal } from "react-dom";
 import { useField, Field, useForm as useForm$1, Form as Form$3, version as version$2, useFormState } from "react-final-form";
 var index$2 = "";
-const title = "_title_pteer_1";
+const title = "_title_15yi1_1";
 var styles$6 = {
   title
 };
@@ -38460,7 +38460,7 @@ function enhancer(Component2, changeAdapter) {
       onChange(val);
     }, 100, {
       maxWait: 500
-    }), []);
+    }), [onChange]);
     useEffect(() => {
       setCurrentValue(value);
     }, [value]);
@@ -38468,7 +38468,6 @@ function enhancer(Component2, changeAdapter) {
       return `enhancer-${primaryId++}`;
     }, []);
     return /* @__PURE__ */ React__default.createElement(Field, {
-      key: name,
       name,
       validate: validate3,
       parse
@@ -38770,36 +38769,13 @@ function AutoComplete(props) {
     data: options2
   }));
 }
-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;
-}
 const ToolItem$1 = (props) => {
   return /* @__PURE__ */ React__default.createElement(Tooltip$1, {
     mini: true,
+    position: "bottom",
     content: props.title
   }, /* @__PURE__ */ React__default.createElement("button", {
+    tabIndex: -1,
     className: "easy-email-extensions-emailToolItem",
     title: props.title,
     onClick: props.onClick
@@ -38867,27 +38843,46 @@ function Link$1(props) {
         style: { color: "#333" }
       }, /* @__PURE__ */ React__default.createElement(Stack$6, {
         vertical: true,
-        spacing: "tight"
-      }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, null), /* @__PURE__ */ React__default.createElement(SearchField, {
+        spacing: "none"
+      }, /* @__PURE__ */ React__default.createElement(SearchField, {
+        size: "small",
         name: "link",
         label: "Link",
         labelHidden: true,
         searchButton: "Apply",
         placeholder: "https://www.example.com",
         onSearch: () => handleSubmit()
-      }), /* @__PURE__ */ React__default.createElement(Stack$6, null, /* @__PURE__ */ React__default.createElement(SwitchField, {
+      })), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+        span: 12
+      }, /* @__PURE__ */ React__default.createElement(Space$1, {
+        align: "center",
+        size: "mini"
+      }, /* @__PURE__ */ React__default.createElement(TextStyle, {
+        size: "smallest"
+      }, "Target"), /* @__PURE__ */ React__default.createElement(SwitchField, {
+        size: "small",
         label: "Target",
+        labelHidden: true,
         name: "blank",
         checkedText: "blank",
         uncheckedText: "self",
         inline: true
-      }), /* @__PURE__ */ React__default.createElement(SwitchField, {
+      }))), /* @__PURE__ */ React__default.createElement(Grid.Col, {
+        span: 12
+      }, /* @__PURE__ */ React__default.createElement(Space$1, {
+        align: "center",
+        size: "mini"
+      }, /* @__PURE__ */ React__default.createElement(TextStyle, {
+        size: "smallest"
+      }, "Underline"), /* @__PURE__ */ React__default.createElement(SwitchField, {
+        size: "small",
         label: "Underline",
+        labelHidden: true,
         name: "underline",
         checkedText: "off",
         uncheckedText: "on",
         inline: true
-      }))))
+      })))))
     }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
       title: "Link",
       icon: /* @__PURE__ */ React__default.createElement(IconFont, {
@@ -41410,7 +41405,23 @@ function Tools(props) {
       display: "flex",
       alignItems: "center"
     }
-  }, /* @__PURE__ */ React__default.createElement("div", {
+  }, mergeTags2 && /* @__PURE__ */ React__default.createElement(Popover$1, {
+    trigger: "click",
+    color: "#fff",
+    position: "left",
+    content: /* @__PURE__ */ React__default.createElement(MergeTags, {
+      value: "",
+      onChange: (val) => execCommand("insertHTML", val)
+    }),
+    getPopupContainer: getPopoverMountNode
+  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    title: "Merge tag",
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-merge-tags"
+    })
+  })), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement("div", {
     className: "easy-email-extensions-divider"
   }), /* @__PURE__ */ React__default.createElement(Popover$1, {
     className: "easy-email-extensions-Tools-Popover",
@@ -41489,22 +41500,6 @@ function Tools(props) {
     getPopupContainer: getPopoverMountNode
   }), /* @__PURE__ */ React__default.createElement("div", {
     className: "easy-email-extensions-divider"
-  }), mergeTags2 && /* @__PURE__ */ React__default.createElement(Popover$1, {
-    trigger: "click",
-    color: "#fff",
-    position: "bottom",
-    content: /* @__PURE__ */ React__default.createElement(MergeTags, {
-      value: "",
-      onChange: (val) => execCommand("insertHTML", val)
-    }),
-    getPopupContainer: getPopoverMountNode
-  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    title: "Merge tag",
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-merge-tags"
-    })
-  })), /* @__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, {
@@ -41571,41 +41566,10 @@ function Tools(props) {
 }
 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(props) {
-  const [position, setPosition] = useState({ top: 0, left: 0 });
-  const [blockNode, setBlockNode] = useState(null);
-  const { focusBlock: focusBlock2 } = useBlock();
-  const { pageData: pageData2 } = useEditorContext();
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  +(pageData2.attributes.width || "600").replace("px", "");
-  useEffect(() => {
-    const promiseObj = awaitForElement(focusIdx2);
-    promiseObj.promise.then((blockNode2) => {
-      setBlockNode(blockNode2);
-    });
-    return () => {
-      promiseObj.cancel();
-    };
-  }, [focusIdx2, focusBlock2]);
-  useEffect(() => {
-    const ele = getShadowRoot().querySelector(".shadow-container");
-    if (!blockNode || !ele)
-      return;
-    const check = () => {
-      const { top, left } = blockNode.getBoundingClientRect();
-      setPosition({ top, left });
-    };
-    const onScroll = () => {
-      check();
-    };
-    check();
-    ele.addEventListener("scroll", onScroll, true);
-    return () => {
-      ele.removeEventListener("scroll", onScroll, true);
-    };
-  }, [blockNode]);
-  if (!blockNode)
+  const { focusBlockNode, focusBlockRect } = useFocusBlockLayout();
+  if (!focusBlockNode || !focusBlockRect)
     return null;
-  const editorContainer = blockNode && getEditNode(blockNode);
+  const editorContainer = getEditNode(focusBlockNode);
   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", {
@@ -41615,8 +41579,8 @@ function RichTextToolBar(props) {
       boxSizing: "border-box",
       position: "fixed",
       zIndex: 100,
-      top: position.top - 24,
-      left: position.left
+      top: focusBlockRect.top - 24,
+      left: focusBlockRect.left
     }
   }, /* @__PURE__ */ React__default.createElement("div", {
     style: {
@@ -41630,7 +41594,7 @@ function RichTextToolBar(props) {
   }), /* @__PURE__ */ React__default.createElement(Tools, {
     container: editorContainer,
     onChange: props.onChange
-  }))), blockNode));
+  }))), focusBlockNode));
 }
 const RichTextField = (props) => {
   const { focusBlock: focusBlock2 } = useBlock();
@@ -41649,7 +41613,7 @@ function FieldWrapper(props) {
   const _a = props, { input } = _a, rest = __objRest(_a, ["input"]);
   const debounceCallbackChange = useCallback(lodash.exports.debounce((val) => {
     input.onChange(val);
-  }, 500), [input]);
+  }, 100), [input]);
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(RichTextToolBar, {
     onChange: debounceCallbackChange
   }), /* @__PURE__ */ React__default.createElement(InlineText, __spreadProps(__spreadValues({}, rest), {
@@ -41838,14 +41802,8 @@ function useAvatarWrapperDrop() {
   const {
     formState: { values: values2 }
   } = useEditorContext();
-  const valuesRef = useRef(values2);
-  const dataTransferRef = useRef(dataTransfer);
-  useEffect(() => {
-    valuesRef.current = values2;
-  }, [values2]);
-  useEffect(() => {
-    dataTransferRef.current = dataTransfer;
-  }, [dataTransfer]);
+  const valuesRef = useRefState(values2);
+  const dataTransferRef = useRefState(dataTransfer);
   function isKeyObject(o) {
     return o.key !== void 0;
   }
@@ -42018,21 +41976,25 @@ const iconsMap = {
 function getIconNameByBlockType(type) {
   return lodash.exports.get(iconsMap, type) || "icon-number";
 }
+const tempEle = document.createElement("div");
+function getBlockTitle(blockData, isFromContent = true) {
+  var _a;
+  if (blockData.title)
+    return blockData.title;
+  if (isFromContent && (blockData.type === BasicType.TEXT || blockData.type === BasicType.BUTTON)) {
+    tempEle.innerHTML = blockData.data.value.content;
+    return tempEle.innerText;
+  }
+  const blockName = (_a = BlockManager.getBlockByType(blockData.type)) == null ? void 0 : _a.name;
+  return blockName;
+}
 function BlockLayer() {
   const { pageData: pageData2 } = useEditorContext();
   const { focusIdx: focusIdx2, setFocusIdx } = useFocusIdx();
   const { setHoverIdx, setIsDragging, setDirection } = useHoverIdx();
   const { moveBlock, setValueByIdx: setValueByIdx2, copyBlock, removeBlock, values: values2 } = useBlock();
-  const {
-    setBlockLayerRef,
-    allowDrop,
-    blockLayerRef,
-    removeHightLightClassName
-  } = useAvatarWrapperDrop();
-  const valueRef = useRef(values2);
-  useEffect(() => {
-    valueRef.current = values2;
-  }, [values2]);
+  const { setBlockLayerRef, allowDrop, removeHightLightClassName } = useAvatarWrapperDrop();
+  const valueRef = useRefState(values2);
   const [contextMenuData, setContextMenuData] = useState(null);
   const onToggleVisible = useCallback(({ id }, e) => {
     e.stopPropagation();
@@ -42043,8 +42005,8 @@ function BlockLayer() {
     }
   }, [setValueByIdx2]);
   const renderTitle = useCallback((data) => {
-    const block2 = BlockManager.getBlockByType(data.type);
     const isPage = data.type === BasicType.PAGE;
+    const title2 = getBlockTitle(data);
     return /* @__PURE__ */ React__default.createElement("div", {
       "data-tree-idx": data.id,
       className: classnames(styles$6.title, !isPage && getNodeIdxClassName(data.id), !isPage && "email-block")
@@ -42054,9 +42016,12 @@ function BlockLayer() {
     }, /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: getIconNameByBlockType(data.type),
       style: { fontSize: 12, color: "#999" }
-    }), /* @__PURE__ */ React__default.createElement(TextStyle, {
+    }), /* @__PURE__ */ React__default.createElement("div", {
+      title: title2,
+      style: { overflow: "hidden", whiteSpace: "nowrap", width: "5em" }
+    }, /* @__PURE__ */ React__default.createElement(TextStyle, {
       size: "smallest"
-    }, block2 == null ? void 0 : block2.name)), /* @__PURE__ */ React__default.createElement("div", {
+    }, title2))), /* @__PURE__ */ React__default.createElement("div", {
       className: styles$6.eyeIcon
     }, /* @__PURE__ */ React__default.createElement(EyeIcon$1, {
       blockData: data,
@@ -44450,7 +44415,8 @@ function ShortcutToolbar() {
             padding: "0px 0px 0px 0px",
             border: "none",
             "vertical-align": "top"
-          }
+          },
+          children: []
         },
         {
           type: "column",
@@ -44461,7 +44427,8 @@ function ShortcutToolbar() {
             padding: "0px 0px 0px 0px",
             border: "none",
             "vertical-align": "top"
-          }
+          },
+          children: []
         }
       ]
     },
@@ -44572,33 +44539,12 @@ function SourceCodePanel() {
     onBlur: onMjmlChange
   })));
 }
-function Toolbar({
-  block: block2,
-  blockNode
-}) {
-  const { moveBlock, copyBlock, removeBlock } = useBlock();
+function Toolbar() {
+  const { moveBlock, copyBlock, removeBlock, focusBlock: focusBlock2 } = useBlock();
   const { focusIdx: focusIdx2, setFocusIdx } = useFocusIdx();
-  const { initialized } = useEditorContext();
+  const { focusBlockRect } = useFocusBlockLayout();
   const { modal, setModalVisible } = useAddToCollection();
-  const [position, setPosition] = useState({ top: 0, left: 0 });
-  const isPage = block2.type === BasicType.PAGE;
-  useEffect(() => {
-    const check = () => {
-      const { top, left } = blockNode.getBoundingClientRect();
-      setPosition({ top, left });
-    };
-    const ele = getShadowRoot().querySelector(".shadow-container");
-    if (!ele || !initialized)
-      return;
-    check();
-    const onScroll = () => {
-      check();
-    };
-    ele.addEventListener("scroll", onScroll, true);
-    return () => {
-      ele.removeEventListener("scroll", onScroll, true);
-    };
-  }, [blockNode, initialized]);
+  const isPage = (focusBlock2 == null ? void 0 : focusBlock2.type) === BasicType.PAGE;
   const handleAddToCollection = () => {
     if (document.activeElement instanceof HTMLElement) {
       document.activeElement.blur();
@@ -44623,13 +44569,15 @@ function Toolbar({
     }
     setFocusIdx(getParentIdx(focusIdx2));
   };
+  if (!focusBlockRect)
+    return null;
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", {
     id: "easy-email-extensions-InteractivePrompt-Toolbar",
     style: {
       position: "fixed",
-      left: position.left,
+      left: focusBlockRect.left,
       height: 0,
-      top: position.top,
+      top: focusBlockRect.top,
       zIndex: 100
     }
   }, /* @__PURE__ */ React__default.createElement("div", {
@@ -44649,9 +44597,11 @@ function Toolbar({
       display: "inline-flex",
       padding: "1px 5px",
       boxSizing: "border-box",
-      whiteSpace: "nowrap"
+      whiteSpace: "nowrap",
+      maxWidth: 300,
+      overflow: "hidden"
     }
-  }, block2.name), /* @__PURE__ */ React__default.createElement("div", {
+  }, focusBlock2 && getBlockTitle(focusBlock2, false)), /* @__PURE__ */ React__default.createElement("div", {
     onClick: (e) => {
       e.stopPropagation();
     },
@@ -44698,25 +44648,11 @@ function ToolItem(props) {
   });
 }
 function FocusTooltip() {
-  const [blockNode, setBlockNode] = useState(null);
   const { focusBlock: focusBlock2 } = useBlock();
   const { focusIdx: focusIdx2 } = useFocusIdx();
+  const { focusBlockNode } = useFocusBlockLayout();
   const isPage = (focusBlock2 == null ? void 0 : focusBlock2.type) === BasicType.PAGE;
-  useEffect(() => {
-    const promiseObj = awaitForElement(focusIdx2);
-    promiseObj.promise.then((blockNode2) => {
-      setBlockNode(blockNode2);
-    });
-    return () => {
-      promiseObj.cancel();
-    };
-  }, [focusIdx2, focusBlock2]);
-  const block2 = useMemo(() => {
-    if (!focusBlock2)
-      return null;
-    return BlockManager.getBlockByType(focusBlock2.type);
-  }, [focusBlock2]);
-  if (!block2 || !blockNode)
+  if (!focusBlockNode || !focusBlock2)
     return null;
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, createPortal(/* @__PURE__ */ React__default.createElement("div", {
     id: "easy-email-extensions-InteractivePrompt-FocusTooltip",
@@ -44744,7 +44680,7 @@ function FocusTooltip() {
     }
   }, /* @__PURE__ */ React__default.createElement(BlockAvatarWrapper, {
     idx: focusIdx2,
-    type: block2.type,
+    type: focusBlock2.type,
     action: "move"
   }, /* @__PURE__ */ React__default.createElement("div", {
     style: {
@@ -44777,10 +44713,32 @@ function FocusTooltip() {
       outlineOffset: "-2px",
       outline: "2px solid var(--selected-color)"
     }
-  }), /* @__PURE__ */ React__default.createElement(Toolbar, {
-    block: block2,
-    blockNode
-  })), blockNode));
+  }), /* @__PURE__ */ React__default.createElement(Toolbar, null)), focusBlockNode));
+}
+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 HoverTooltip() {
   const { hoverIdx, direction, isDragging } = useHoverIdx();
@@ -44889,9 +44847,7 @@ function TipNode(props) {
     }
   }, type === "hover" && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", {
     style: {
-      position: "absolute",
-      left: 0,
-      top: 0,
+      position: "fixed",
       backgroundColor: color,
       color: "#ffffff",
       height: "22px",
@@ -45225,5 +45181,5 @@ const SimpleLayout = (props) => {
     title: "Source code"
   }, /* @__PURE__ */ React__default.createElement(SourceCodePanel, null))))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, null)));
 };
-export { SwitchField as $, AttributePanel as A, BlockLayer as B, Color as C, Decoration as D, InputWithUnitField as E, FontFamily as F, SearchField as G, Height as H, InteractivePrompt as I, TextAreaField as J, NumberField as K, LetterSpacing as L, Margin as M, NavbarLinkPadding as N, SliderField as O, Padding as P, ColorPickerField as Q, ImageUploaderField as R, ShortcutToolbar as S, TextAlign as T, UploadField as U, VerticalAlign as V, Width as W, SelectField as X, TreeSelectField as Y, AutoCompleteField as Z, RadioGroupField as _, BlockAttributeConfigurationManager as a, DatePickerField as a0, CheckboxField as a1, EditTabField as a2, InlineTextField as a3, enhancer as a4, RichTextField as a5, Align as b, commonjsGlobal as c, AttributesPanelWrapper as d, ContainerBackgroundColor as e, TextDecoration as f, getContextMergeTags as g, Background as h, LineHeight as i, TextTransform as j, BackgroundColor as k, Direction as l, Link as m, Border as n, BorderColor as o, FontSize as p, MergeTags as q, BorderStyle as r, FontStyle as s, BorderWidth as t, FontWeight as u, BlockMarketManager as v, BlockMaskWrapper as w, SourceCodePanel as x, SimpleLayout as y, TextField as z };
+export { RadioGroupField as $, AttributePanel as A, BlockLayer as B, Color as C, Decoration as D, TextField as E, FontFamily as F, InputWithUnitField as G, Height as H, InteractivePrompt as I, SearchField as J, TextAreaField as K, LetterSpacing as L, Margin as M, NavbarLinkPadding as N, NumberField as O, Padding as P, SliderField as Q, ColorPickerField as R, ShortcutToolbar as S, TextAlign as T, UploadField as U, VerticalAlign as V, Width as W, ImageUploaderField as X, SelectField as Y, TreeSelectField as Z, AutoCompleteField as _, getIconNameByBlockType as a, SwitchField as a0, DatePickerField as a1, CheckboxField as a2, EditTabField as a3, InlineTextField as a4, enhancer as a5, RichTextField as a6, BlockAttributeConfigurationManager as b, commonjsGlobal as c, Align as d, AttributesPanelWrapper as e, ContainerBackgroundColor as f, getContextMergeTags as g, TextDecoration as h, Background as i, LineHeight as j, TextTransform as k, BackgroundColor as l, Direction as m, Link as n, Border as o, BorderColor as p, FontSize as q, MergeTags as r, BorderStyle as s, FontStyle as t, BorderWidth as u, FontWeight as v, BlockMarketManager as w, BlockMaskWrapper as x, SourceCodePanel as y, SimpleLayout as z };
 //# sourceMappingURL=index2.js.map