Merge pull request #13 from briefercloud/fix-scroll

 fix: Unnecessary scrolling after code block insert

apps/web/src/components/v2Editor/index.tsx

@@ -890,7 +890,6 @@ file`
  }, [blocks, layout, tabRefs, environmentStartedAt])
 
  const runBelowBlock = useCallback(() => {
- debugger
  const currentBlockGroupIndex = layout.value.toArray().findIndex((bg) => {
  return bg.getAttribute('id') === props.id
  })
@@ -1247,9 +1246,16 @@ const V2Editor = (props: V2EditorProps) => {
  behavior: 'smooth',
  })
  } else {
- el.scrollIntoView({
+ // scroll el so that it's center is at the center of the scroll view
+ const top =
+ elRect.top -
+ scrollRect.top -
+ scrollRect.height / 2 +
+ elRect.height / 2
+
+ scrollViewRef.current.scrollBy({
+ top,
  behavior: 'smooth',
- block: 'center',
  })
  }
 

apps/web/src/hooks/useV2CodeEditor.ts

@@ -113,19 +113,30 @@ function useCodeEditor(
  !interactionState.scrollIntoView
  ) {
  const scrollView = document.getElementById('editor-scrollview')
+ const editorRect = editor.getDomNode()?.getBoundingClientRect()
  editor.focus()
  setIsEditorFocused(true)
 
- if (!scrollView) {
+ if (!scrollView || !editorRect) {
  return
  }
 
  const currentLine = editor.getPosition()?.lineNumber ?? 0
- const top = editor.getTopForLineNumber(currentLine)
- scrollView.scrollBy({
- top: top - scrollView.getBoundingClientRect().top - 80,
- behavior: 'smooth',
- })
+ const scrollViewRect = scrollView.getBoundingClientRect()
+ const top = editorRect.top + editor.getTopForLineNumber(currentLine)
+
+ // scroll to make sure we can see cursor in screen
+ if (top < scrollViewRect.top) {
+ scrollView.scrollBy({
+ top: top - scrollViewRect.top - 80,
+ behavior: 'smooth',
+ })
+ } else if (top + 20 > scrollViewRect.bottom) {
+ scrollView.scrollBy({
+ top: top - scrollViewRect.bottom + 80,
+ behavior: 'smooth',
+ })
+ }
  }
  }, [interactionState, blockId, editor])