Fix: Self Scroll to Highlighted Line

walnuthq · Mar 22, 2024 · 7416c0c · 7416c0c
1 parent 51eb4cb
commit 7416c0c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 20 deletions.
diff --git a/components/Editor/InstructionsTable.tsx b/components/Editor/InstructionsTable.tsx
@@ -1,5 +1,6 @@
-import { useEffect, useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 
+import cn from 'classnames'
 import ReactTooltip from 'react-tooltip'
 import { IInstruction } from 'types'
 
@@ -21,20 +22,19 @@ export const InstructionsTable = ({
   codeType: CodeType
 }) => {
   useEffect(() => {
-    if (
-      tableRef.current &&
-      focusRowRef.current &&
-      focusRowRef.current.offsetTop
-    ) {
-      tableRef.current.scrollTo({
-        top: focusRowRef.current.offsetTop - 58,
-        behavior: 'smooth',
-      })
+    if (tableRef.current) {
+      const activeRowRef = rowRefs.current[activeIndexes[0]]
+      if (activeRowRef) {
+        tableRef.current?.scrollTo({
+          top: activeRowRef.offsetTop - 58,
+          behavior: 'smooth',
+        })
+      }
     }
   }, [activeIndexes])
 
   const tableRef = useRef<HTMLDivElement>(null)
-  const focusRowRef = useRef<HTMLTableRowElement>(null)
+  const rowRefs = useRef<Array<HTMLTableRowElement | null>>([])
 
   const splitInLines = (instructionName: string) =>
     instructionName.split('\n').map((line, i) => (
@@ -84,9 +84,8 @@ export const InstructionsTable = ({
     const tooltipId = getRandomToolTipId()
 
     return (
-      <>
+      <React.Fragment key={key}>
         <span
-          key={key}
           data-tip
           data-for={tooltipId}
           className="hover:text-orange-500 cursor-pointer"
@@ -96,7 +95,7 @@ export const InstructionsTable = ({
         <ReactTooltip id={tooltipId} effect="solid">
           <span>{formatSierraVariableValue(variableValues)}</span>
         </ReactTooltip>
-      </>
+      </React.Fragment>
     )
   }
 
@@ -121,21 +120,22 @@ export const InstructionsTable = ({
   return (
     <div
       ref={tableRef}
-      className="overflow-auto pane pane-light relative bg-gray-50 dark:bg-black-600 border-gray-200 dark:border-black-500"
+      className="overflow-auto h-full pane pane-light relative bg-gray-50 dark:bg-black-600 border-gray-200 dark:border-black-500"
     >
       <table className="w-full font-mono text-tiny">
         <tbody>
           {instructions.map((instruction, index) => {
             const isActive = activeIndexes.includes(index)
             return (
               <tr
-                ref={activeIndexes[0] === index ? focusRowRef : undefined}
+                ref={(el) => (rowRefs.current[index] = el)}
                 key={index}
-                className={`border-b border-gray-200 dark:border-black-500 ${
+                className={cn(
+                  'border-b border-gray-200 dark:border-black-500',
                   isActive
                     ? 'text-gray-900 dark:text-gray-200'
-                    : 'text-gray-400 dark:text-gray-600'
-                } `}
+                    : 'text-gray-400 dark:text-gray-600',
+                )}
               >
                 <td className={`pl-6 pr-1 px-2 whitespace-nowrap w-[1%]`}>
                   {index + 1}

diff --git a/components/Editor/index.tsx b/components/Editor/index.tsx
@@ -348,7 +348,7 @@ const Editor = ({ readOnly = false }: Props) => {
             </div>
 
             <div
-              className="relative pane grow pane-light overflow-auto md:border-r bg-gray-50 dark:bg-black-600 border-gray-200 dark:border-black-500"
+              className="relative pane grow pane-light md:border-r bg-gray-50 dark:bg-black-600 border-gray-200 dark:border-black-500"
               style={{ height: cairoEditorHeight }}
             >
               {codeType === CodeType.CASM ? (