chore: auto scroll to added variable

Author: kevinkim-ogp

packages/frontend/src/components/RichTextEditor/index.tsx

@@ -46,6 +46,7 @@ import {
   checkAutoFocus,
   genVariableInfoMap,
   getPopoverPlacement,
+  singleLineEditorScroll,
   substituteOldTemplates,
 } from './utils'
 
@@ -215,8 +216,12 @@ const Editor = ({
         },
       })
       editor?.commands.focus()
+
+      if (isMulticol && editor) {
+        singleLineEditorScroll(editor)
+      }
     },
-    [editor],
+    [editor, isMulticol],
   )
 
   const {

packages/frontend/src/components/RichTextEditor/utils.ts

@@ -1,7 +1,12 @@
 import { FieldValues, UseFormGetValues } from 'react-hook-form'
 import { PlacementWithLogical } from '@chakra-ui/react'
 import { Editor } from '@tiptap/react'
-import { HTMLElement, Node, parse, TextNode } from 'node-html-parser'
+import {
+  HTMLElement as NodeHTMLElement,
+  Node,
+  parse,
+  TextNode,
+} from 'node-html-parser'
 
 import type { StepWithVariables } from '@/helpers/variables'
 
@@ -59,12 +64,12 @@ export function genVariableInfoMap(
 function constructVariableSpanElement(
   varInfo: VariableInfoMap,
   id: string,
-): HTMLElement {
+): NodeHTMLElement {
   const idComponents = id.split('.')
   const varInfoForNode = varInfo.get(`{{${id}}}`)
   const value = varInfoForNode?.testRunValue || ''
   const label = varInfoForNode?.label || idComponents[idComponents.length - 1]
-  const span = new HTMLElement('span', {})
+  const span = new NodeHTMLElement('span', {})
   span.setAttribute('data-type', 'variable')
   span.setAttribute('data-id', id)
   span.setAttribute('data-label', label)
@@ -93,9 +98,9 @@ function substituteTemplateStringWithSpan(
 }
 
 function recursiveSubstitute(
-  el: HTMLElement,
+  el: NodeHTMLElement,
   varInfo: VariableInfoMap,
-): HTMLElement {
+): NodeHTMLElement {
   const dataIdAttr = el.getAttribute('data-id')
   const dataTypeAttr = el.getAttribute('data-type')
   if (dataTypeAttr === 'variable' && dataIdAttr != null) {
@@ -105,7 +110,7 @@ function recursiveSubstitute(
   }
   const newChildNodes: Node[] = []
   el.childNodes.forEach((n) => {
-    if (n instanceof HTMLElement) {
+    if (n instanceof NodeHTMLElement) {
       newChildNodes.push(recursiveSubstitute(n, varInfo))
     } else if (n instanceof TextNode) {
       // We cannot use n.textContent here because it will unescape all HTML tags
@@ -139,7 +144,7 @@ export function getPopoverPlacement(
     return 'bottom-start'
   }
 
-  const editorElement = editor?.view.dom as globalThis.HTMLElement
+  const editorElement = editor?.view.dom as HTMLElement
   if (!editorElement) {
     return 'bottom-start'
   }
@@ -163,3 +168,86 @@ export const checkAutoFocus = (
   const isNewRow = rowData?.isNew
   return { shouldAutoFocus: isNewRow && autoFocusProp, isNewRow, rowData }
 }
+
+// Add scrolling behavior for single-line mode
+export const singleLineEditorScroll = (editor: Editor) => {
+  if (!editor) {
+    return
+  }
+
+  setTimeout(() => {
+    const singleLineEditor = editor.view.dom.closest(
+      '.single-line-editor',
+    ) as HTMLElement
+    if (singleLineEditor) {
+      // Get the current cursor position
+      const pos = editor.state.selection.$head.pos
+      let targetVariable = findClosestVariableNode(
+        editor,
+        pos,
+        singleLineEditor,
+      )
+
+      // If we still haven't found it, fall back to the last variable
+      if (!targetVariable) {
+        const variables = Array.from(
+          singleLineEditor.getElementsByClassName('node-variable'),
+        ) as HTMLElement[]
+        if (variables.length > 0) {
+          targetVariable = variables[variables.length - 1]
+        }
+      }
+
+      // Scroll to the target variable if found
+      if (targetVariable) {
+        scrollVariableIntoView(targetVariable, singleLineEditor)
+      }
+    }
+  }, 10)
+}
+
+export function findClosestVariableNode(
+  editor: any,
+  pos: number,
+  container: HTMLElement,
+): HTMLElement | null {
+  for (let offset = -1; offset <= 1; offset++) {
+    const checkPos = Math.max(0, pos + offset)
+    const domInfo = editor.view.domAtPos(checkPos)
+    const node = domInfo.node as HTMLElement
+
+    if (node.classList?.contains('node-variable')) {
+      return node
+    }
+
+    const prevSibling = node.previousElementSibling as HTMLElement
+    if (prevSibling?.classList?.contains('node-variable')) {
+      return prevSibling
+    }
+
+    const nextSibling = node.nextElementSibling as HTMLElement
+    if (nextSibling?.classList?.contains('node-variable')) {
+      return nextSibling
+    }
+  }
+
+  // Fallback: last variable in the container
+  const variables = container.getElementsByClassName('node-variable')
+  return variables.length > 0
+    ? (variables[variables.length - 1] as HTMLElement)
+    : null
+}
+
+export function scrollVariableIntoView(
+  target: HTMLElement,
+  container: HTMLElement,
+) {
+  const targetDiv = target
+  const containerWidth = container.clientWidth
+  const scrollLeft =
+    targetDiv.offsetLeft - containerWidth + targetDiv.offsetWidth + 20
+  container.scrollTo({
+    left: Math.max(0, scrollLeft),
+    behavior: 'smooth',
+  })
+}