feat: modify logic to gen cursor index

server/src/workflow-management/classes/Generator.ts

@@ -429,28 +429,54 @@ export class WorkflowGenerator {
 
     if ((elementInfo?.tagName === 'INPUT' || elementInfo?.tagName === 'TEXTAREA') && selector) {
       // Calculate the exact position within the element
-      const positionAndCursor = await page.evaluate((selector) => {
+      const positionAndCursor = await page.evaluate(
-        const element = document.querySelector(selector);
+        ({ selector, coords }) => {
-        if (!element) return null;
+            const element = document.querySelector(selector);
+            if (!element) return null;
             
-        // Get element position for the relative click coordinates
+            const getCursorPosition = (inputElement: HTMLInputElement | HTMLTextAreaElement, clickCoords: Coordinates) => {
-        const rect = element.getBoundingClientRect();
+                const rect = inputElement.getBoundingClientRect();
+                const clickX = clickCoords.x - rect.left;
                 
-        // Get cursor position index
+                // Get the input's text content
-        let cursorIndex = 0;
+                const text = inputElement.value;
-        if ('selectionStart' in element) {
-          // selectionStart gives us the exact index where the cursor is
-          cursorIndex = (element as HTMLInputElement | HTMLTextAreaElement).selectionStart || 0;
-        }
                 
-        return {
+                // Create a temporary element to measure text
-          rect: {
+                const measurer = document.createElement('span');
-            x: rect.left,
+                measurer.style.font = window.getComputedStyle(inputElement).font;
-            y: rect.top
+                measurer.style.position = 'absolute';
-          },
+                measurer.style.whiteSpace = 'pre';
-          cursorIndex  
+                measurer.style.visibility = 'hidden';
-        };
+                document.body.appendChild(measurer);
-      }, selector);
+                
+                // Find the position where the click occurred
+                let position = 0;
+                for (let i = 0; i <= text.length; i++) {
+                    measurer.textContent = text.slice(0, i);
+                    const width = measurer.getBoundingClientRect().width;
+                    if (width >= clickX) {
+                        position = i;
+                        break;
+                    }
+                }
+                
+                document.body.removeChild(measurer);
+                return position;
+            };
+    
+            const rect = element.getBoundingClientRect();
+            const cursorIndex = getCursorPosition(element as HTMLInputElement | HTMLTextAreaElement, coords);
+            
+            return {
+                rect: {
+                    x: rect.left,
+                    y: rect.top
+                },
+                cursorIndex
+            };
+        },
+        { selector, coords: coordinates } 
+    );
 
       if (positionAndCursor) {
         const relativeX = coordinates.x - positionAndCursor.rect.x;