fix(knowledge): preserve scroll position when toggling tokenizer in chunk viewer

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/chunk-editor/chunk-editor.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { Label, Switch } from '@/components/emcn'
 import { isApiClientError } from '@/lib/api/client/errors'
 import { requestJson } from '@/lib/api/client/request'
@@ -50,6 +50,8 @@ export function ChunkEditor({
   onCreated,
 }: ChunkEditorProps) {
   const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const tokenizedScrollRef = useRef<HTMLDivElement>(null)
+  const preservedScrollTopRef = useRef(0)
   const { mutateAsync: updateChunk } = useUpdateChunk()
   const { mutateAsync: createChunk } = useCreateChunk()
 
@@ -170,6 +172,20 @@ export function ChunkEditor({
     [saveRef]
   )
 
+  const handleTokenizerChange = useCallback(
+    (value: boolean) => {
+      const source = tokenizerOn ? tokenizedScrollRef.current : textareaRef.current
+      preservedScrollTopRef.current = source?.scrollTop ?? 0
+      setTokenizerOn(value)
+    },
+    [tokenizerOn]
+  )
+
+  useLayoutEffect(() => {
+    const target = tokenizerOn ? tokenizedScrollRef.current : textareaRef.current
+    if (target) target.scrollTop = preservedScrollTopRef.current
+  }, [tokenizerOn])
+
   const tokenStrings = useMemo(() => {
     if (!tokenizerOn || !editedContent) return []
     return getTokenStrings(editedContent)
@@ -196,7 +212,10 @@ export function ChunkEditor({
         }}
       >
         {tokenizerOn ? (
-          <div className='h-full w-full cursor-default overflow-y-auto whitespace-pre-wrap break-words p-6 font-sans text-[var(--text-body)] text-sm'>
+          <div
+            ref={tokenizedScrollRef}
+            className='h-full w-full cursor-default overflow-y-auto whitespace-pre-wrap break-words p-6 font-sans text-[var(--text-body)] text-sm'
+          >
             {tokenStrings.map((token, index) => (
               <span
                 key={index}
@@ -232,7 +251,7 @@ export function ChunkEditor({
       <div className='flex items-center justify-between border-[var(--border)] border-t px-6 py-2.5'>
         <TokenizerToggle
           checked={tokenizerOn}
-          onCheckedChange={setTokenizerOn}
+          onCheckedChange={handleTokenizerChange}
           hoveredTokenIndex={tokenizerOn ? hoveredTokenIndex : null}
         />
         <span className='text-[var(--text-secondary)] text-caption'>