fix markup range incorrect

components/Sliders/index.tsx

@@ -54,7 +54,6 @@ const Sliders: React.FC<Props> = ({
 
       if (onChange) {
         const val = Math.floor(percent * (maximum * 0.01));
-        console.log(val);
         onChange(val);
       }
     }

helpers/markup.ts

@@ -98,14 +98,18 @@ export const getMarkupWithSelection: GetMarkupWithSelectionFunc = ({
   const textElements = [...textLayer.childNodes];
 
   textElements.forEach((ele: HTMLElement) => {
-    const { offsetTop, offsetLeft, offsetHeight, offsetWidth } = ele;
-    const offsetRight = offsetLeft + offsetWidth;
-    const offsetBottom = offsetTop + offsetHeight;
+    const { height, width } = ele.getBoundingClientRect();
+    const { offsetTop, offsetLeft } = ele;
+
+    const top = offsetTop;
+    const left = offsetLeft;
+    const right = offsetLeft + width;
+    const bottom = offsetTop + height;
     const coords = {
-      top: offsetTop,
-      bottom: offsetBottom,
-      left: offsetLeft,
-      right: offsetRight,
+      top,
+      bottom,
+      left,
+      right,
     };
 
     if (startElement === ele && endElement === ele) {
@@ -121,28 +125,21 @@ export const getMarkupWithSelection: GetMarkupWithSelectionFunc = ({
       // in end element
       coords.right = endX;
       position.push(coords);
-    } else if (
-      offsetTop >= startY + offsetHeight &&
-      offsetBottom <= endY - offsetHeight
-    ) {
+    } else if (top >= startY + height && bottom <= endY - height) {
       // in row
       position.push(coords);
     } else if (
-      offsetLeft > startX &&
-      offsetRight < endX &&
-      offsetTop >= startY &&
-      offsetBottom <= endY
+      left > startX &&
+      right < endX &&
+      top >= startY &&
+      bottom <= endY
     ) {
       // in line
       position.push(coords);
-    } else if (offsetTop >= startY - 3 && offsetBottom <= endY + 3) {
+    } else if (top >= startY - 3 && bottom <= endY + 3) {
       if (
-        (offsetLeft > startX &&
-          offsetTop >= startY - 3 &&
-          offsetBottom < endY - offsetHeight) ||
-        (offsetRight < endX &&
-          offsetBottom <= endY + 3 &&
-          offsetTop > startY + offsetHeight)
+        (left > startX && top >= startY - 3 && bottom < endY - height) ||
+        (right < endX && bottom <= endY + 3 && top > startY + height)
       ) {
         // in first line and end line
         position.push(coords);