feat: enable virtual scrolling in code preview (#133)

Co-authored-by: Joery <joery@supportprofessionals.nl>

Author: Joery-M

src/client/components/DiffEditor.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import type CodeMirror from 'codemirror'
 import { Pane, Splitpanes } from 'splitpanes'
 import { nextTick, onMounted, ref, toRefs, watchEffect } from 'vue'
-import { syncCmHorizontalScrolling, useCodeMirror } from '../logic/codemirror'
+import { syncEditorScrolls, syncScrollListeners, useCodeMirror } from '../logic/codemirror'
 import { guessMode } from '../logic/utils'
 import { useOptionsStore } from '../stores/options'
 import { calculateDiffWithWorker } from '../worker/diff'
@@ -17,47 +18,54 @@ const options = useOptionsStore()
 
 const { from, to } = toRefs(props)
 
-const fromEl = ref<HTMLTextAreaElement>()
-const toEl = ref<HTMLTextAreaElement>()
+const fromEl = useTemplateRef('fromEl')
+const toEl = useTemplateRef('toEl')
+
+let cm1: CodeMirror.Editor
+let cm2: CodeMirror.Editor
 
 onMounted(() => {
-  const cm1 = useCodeMirror(
+  cm1 = useCodeMirror(
     fromEl,
     from,
     {
       mode: 'javascript',
       readOnly: true,
       lineNumbers: true,
-      scrollbarStyle: 'null',
     },
   )
 
-  const cm2 = useCodeMirror(
+  cm2 = useCodeMirror(
     toEl,
     to,
     {
       mode: 'javascript',
       readOnly: true,
       lineNumbers: true,
-      scrollbarStyle: 'null',
     },
   )
 
-  syncCmHorizontalScrolling(cm1, cm2)
+  syncScrollListeners(cm1, cm2)
 
   watchEffect(() => {
     cm1.setOption('lineWrapping', options.view.lineWrapping)
     cm2.setOption('lineWrapping', options.view.lineWrapping)
   })
 
-  watchEffect(() => {
-    // @ts-expect-error untyped
-    cm1.display.wrapper.style.display = props.oneColumn ? 'none' : ''
+  watchEffect(async () => {
+    cm1.getWrapperElement().style.display = props.oneColumn ? 'none' : ''
+    if (!props.oneColumn) {
+      await nextTick()
+      // Force sync to current scroll
+      cm1.refresh()
+      syncEditorScrolls(cm2, cm1)
+    }
   })
 
   watchEffect(async () => {
     const l = from.value
     const r = to.value
+    const diffEnabled = props.diff
 
     cm1.setOption('mode', guessMode(l))
     cm2.setOption('mode', guessMode(r))
@@ -75,7 +83,7 @@ onMounted(() => {
     for (let i = 0; i < cm2.lineCount() + 2; i++)
       cm2.removeLineClass(i, 'background', 'diff-added')
 
-    if (props.diff && from.value) {
+    if (diffEnabled && from.value) {
       const changes = await calculateDiffWithWorker(l, r)
 
       const addedLines = new Set()
@@ -124,6 +132,9 @@ const leftPanelSize = computed(() => {
 })
 
 function onUpdate(size: number) {
+  // Refresh sizes
+  cm1?.refresh()
+  cm2?.refresh()
   if (props.oneColumn)
     return
   options.view.panelSizeDiff = size
@@ -132,11 +143,11 @@ function onUpdate(size: number) {
 
 <template>
   <Splitpanes @resize="onUpdate($event[0].size)">
-    <Pane v-show="!oneColumn" min-size="10" :size="leftPanelSize" class="h-max min-h-screen" border="main r">
-      <textarea ref="fromEl" v-text="from" />
+    <Pane v-show="!oneColumn" min-size="10" :size="leftPanelSize" border="main r">
+      <div ref="fromEl" class="h-inherit" />
     </Pane>
-    <Pane min-size="10" :size="100 - leftPanelSize" class="h-max min-h-screen">
-      <textarea ref="toEl" v-text="to" />
+    <Pane min-size="10" :size="100 - leftPanelSize">
+      <div ref="toEl" class="h-inherit" />
     </Pane>
   </Splitpanes>
 </template>

src/client/logic/codemirror.ts

@@ -2,30 +2,32 @@ import type { Ref, WritableComputedRef } from 'vue'
 import CodeMirror from 'codemirror'
 import { watch } from 'vue'
 
-import 'codemirror/mode/javascript/javascript'
+import 'codemirror/addon/dialog/dialog'
+import 'codemirror/addon/dialog/dialog.css'
+import 'codemirror/addon/display/placeholder'
+import 'codemirror/addon/search/jump-to-line'
+import 'codemirror/addon/search/search'
+import 'codemirror/lib/codemirror.css'
 import 'codemirror/mode/css/css'
+import 'codemirror/mode/handlebars/handlebars'
+import 'codemirror/mode/htmlmixed/htmlmixed'
+import 'codemirror/mode/javascript/javascript'
 import 'codemirror/mode/markdown/markdown'
-import 'codemirror/mode/xml/xml'
 import 'codemirror/mode/pug/pug'
 import 'codemirror/mode/sass/sass'
 import 'codemirror/mode/vue/vue'
-import 'codemirror/mode/handlebars/handlebars'
-import 'codemirror/mode/htmlmixed/htmlmixed'
-import 'codemirror/addon/display/placeholder'
-import 'codemirror/lib/codemirror.css'
+import 'codemirror/mode/xml/xml'
 
 export function useCodeMirror(
-  textarea: Ref<HTMLTextAreaElement | null | undefined>,
+  container: Ref<HTMLDivElement | null | undefined>,
   input: Ref<string> | WritableComputedRef<string>,
   options: CodeMirror.EditorConfiguration = {},
 ) {
-  const cm = CodeMirror.fromTextArea(
-    textarea.value!,
-    {
-      theme: 'vars',
-      ...options,
-    },
-  )
+  const cm = CodeMirror(container.value!, {
+    theme: 'vars',
+    value: input.value,
+    ...options,
+  })
 
   let skip = false
 
@@ -45,6 +47,7 @@ export function useCodeMirror(
         const selections = cm.listSelections()
         cm.replaceRange(v, cm.posFromIndex(0), cm.posFromIndex(Number.POSITIVE_INFINITY))
         cm.setSelections(selections)
+        cm.scrollTo(0, 0)
       }
     },
     { immediate: true },
@@ -53,9 +56,21 @@ export function useCodeMirror(
   return cm
 }
 
-export function syncCmHorizontalScrolling(
-  cm1: CodeMirror.EditorFromTextArea,
-  cm2: CodeMirror.EditorFromTextArea,
+export function syncEditorScrolls(primary: CodeMirror.Editor, target: CodeMirror.Editor) {
+  const pInfo = primary.getScrollInfo()
+  const tInfo = target.getScrollInfo()
+
+  // Map scroll range
+  let x = ((tInfo.width - tInfo.clientWidth) / (pInfo.width - pInfo.clientWidth)) * pInfo.left
+  let y = ((tInfo.height - tInfo.clientHeight) / (pInfo.height - pInfo.clientHeight)) * pInfo.top
+  x = Number.isNaN(x) ? 0 : x
+  y = Number.isNaN(y) ? 0 : y
+  target.scrollTo(x, y)
+}
+
+export function syncScrollListeners(
+  cm1: CodeMirror.Editor,
+  cm2: CodeMirror.Editor,
 ) {
   let activeCm = 1
 
@@ -68,10 +83,14 @@ export function syncCmHorizontalScrolling(
 
   cm1.on('scroll', (editor) => {
     if (activeCm === 1)
-      cm2.scrollTo(editor.getScrollInfo().left)
+      syncEditorScrolls(editor, cm2)
   })
+  // Scroll cursor into view no matter which view is active
+  cm1.on('scrollCursorIntoView', editor => syncEditorScrolls(editor, cm2))
+
   cm2.on('scroll', (editor) => {
     if (activeCm === 2)
-      cm1.scrollTo(editor.getScrollInfo().left)
+      syncEditorScrolls(editor, cm1)
   })
+  cm2.on('scrollCursorIntoView', editor => syncEditorScrolls(editor, cm1))
 }

src/client/pages/index/module.vue

@@ -249,7 +249,6 @@ getHot().then((hot) => {
             :one-column="options.view.showOneColumn || !!currentTransform?.error"
             :diff="options.view.diff && !currentTransform?.error"
             :from="from" :to="to"
-            h-unset
           />
         </div>
       </Pane>

src/client/styles/main.css

@@ -15,16 +15,22 @@ html.dark {
 }
 
 .CodeMirror {
-  height: max-content !important;
+  height: inherit !important;
   font-family: var(--cm-font-family) !important;
   font-size: 13px !important;
 }
 
-.CodeMirror-scroll {
-  overflow-y: hidden !important;
-  overflow-x: auto !important;
+.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  background-color: var(--cm-background) !important;
 }
 
+.CodeMirror-dialog {
+  @apply !border-main !py-1;
+}
+
+#CodeMirror-search-field {
+  @apply !border-main !border !rounded !outline-none !border-solid !px-1.5 !py-0.25;
+}
 
 /* Splitpanes */
 .splitpanes__pane {