scroll edit

libs/remix-ui/workspace/src/lib/components/flat-tree.tsx

@@ -3,7 +3,7 @@ import { Popover } from 'react-bootstrap'
 import { FileType, WorkspaceElement } from '../types'
 import { ROOT_PATH } from '../utils/constants'
 import { getPathIcon } from '@remix-ui/helper';
-import { Virtuoso } from 'react-virtuoso'
+import { Virtuoso, VirtuosoHandle } from 'react-virtuoso'
 import { FlatTreeItemInput } from './flat-tree-item-input';
 import { FlatTreeDrop } from './flat-tree-drop';
 import { getEventTarget } from '../utils/getEventTarget';
@@ -68,7 +68,7 @@ export const FlatTree = (props: FlatTreeProps) => {
   const ref = useRef(null)
   const [size, setSize] = useState(0)
   const containerRef = useRef<HTMLDivElement>(null)
-  const virtuoso = useRef(null)
+  const virtuoso = useRef<VirtuosoHandle>(null)
   const isOnScreen = useOnScreen(containerRef)
 
   useEffect(() => {
@@ -193,6 +193,18 @@ export const FlatTree = (props: FlatTreeProps) => {
   }, [containerRef.current])
 
 
+  useEffect(() => {
+    if (focusEdit && focusEdit.element) {
+
+      const index = flatTree[focusEdit.element] && Object.keys(flatTree).indexOf(focusEdit.element)
+      flatTree[focusEdit.element] && virtuoso.current.scrollIntoView({
+        index,
+        align: 'center'
+      })
+    }
+  }, [focusEdit])
+
+
   const Row = (index: number) => {
     const node = Object.keys(flatTree)[index]
     const file = flatTree[node]