feat: synchronize scrolling

src/components/MarkdownUi.vue

@@ -26,6 +26,7 @@
           autocomplete="off"
           autocorrect="off"
           class="markdown-editor-textarea"
+          :class="[scrollableClass]"
           data-testid="markdown-editor-textarea"
           placeholder="Begin editing..."
           spellcheck="false"
@@ -43,15 +44,18 @@
           class="markdown-content-container"
           data-testid="markdown-content-container"
         >
-          <MarkdownContent :content="htmlPreview ? markdownPreviewHtml : markdownHtml" />
+          <MarkdownContent
+            :class="[scrollableClass]"
+            :content="htmlPreview ? markdownPreviewHtml : markdownHtml"
+          />
         </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onBeforeMount, onMounted, computed, ref, nextTick, provide, watch, watchEffect } from 'vue'
+import { onBeforeMount, onMounted, onUnmounted, computed, ref, nextTick, provide, watch, watchEffect } from 'vue'
 import type { PropType } from 'vue'
 import MarkdownToolbar from './MarkdownToolbar.vue'
 import MarkdownContent from './MarkdownContent.vue'
@@ -108,8 +112,10 @@ const emit = defineEmits<{
 const { init: initMarkdownIt, md } = composables.useMarkdownIt(props.theme)
 
 // Generate a unique id to handle mutiple components on the same page
-const componentContainerId = computed((): string => `markdown-ui-${uuidv4()}`)
-const textareaId = computed((): string => `markdown-ui-textarea-${uuidv4()}`)
+const uniqueId = uuidv4()
+const componentContainerId = computed((): string => `markdown-ui-${uniqueId}`)
+const textareaId = computed((): string => `markdown-ui-textarea-${uniqueId}`)
+const scrollableClass = computed((): string => `scrollable-${uniqueId}`)
 
 // Provide values to child components
 provide(TEXTAREA_ID, computed((): string => textareaId.value))
@@ -175,6 +181,19 @@ watchEffect(() => {
   }
 })
 
+const updateMermaid = async () => {
+  if (props.mermaid) {
+    // Scope the query selector to this instance of the markdown component (unique container id)
+    const mermaidNodes = `#${componentContainerId.value} .markdown-content-container .mermaid`
+    if (typeof MermaidJs !== 'undefined' && typeof MermaidJs?.run === 'function' && document.querySelector(mermaidNodes)) {
+      await MermaidJs.run({
+        querySelector: mermaidNodes,
+        suppressErrors: true,
+      })
+    }
+  }
+}
+
 // When the textarea `input` event is triggered, or "faked" by other editor methods, update the Vue refs and rendered markdown
 const onContentEdit = async (event: TextAreaInputEvent, emitEvent = true): Promise<void> => {
   // Update the ref
@@ -189,7 +208,7 @@ const onContentEdit = async (event: TextAreaInputEvent, emitEvent = true): Promi
   }
 
   // Re-render any `.mermaid` containers
-  await nextTick()
+  await nextTick() // **MUST** await nextTick for the virtual DOM to refresh
   await updateMermaid()
 }
 
@@ -244,18 +263,7 @@ onBeforeMount(async () => {
   await updateMermaid()
 })
 
-const updateMermaid = async () => {
-  if (props.mermaid) {
-    // Scope the query selector to this instance of the markdown component (unique container id)
-    const mermaidNodes = `#${componentContainerId.value} .markdown-content-container .mermaid`
-    if (typeof MermaidJs !== 'undefined' && typeof MermaidJs?.run === 'function' && document.querySelector(mermaidNodes)) {
-      await MermaidJs.run({
-        querySelector: mermaidNodes,
-        suppressErrors: true,
-      })
-    }
-  }
-}
+const { initializeSyncScroll, destroySyncScroll } = composables.useSyncScroll(scrollableClass)
 
 onMounted(async () => {
   ready.value = true
@@ -269,6 +277,17 @@ onMounted(async () => {
       theme: props.theme === 'light' ? 'default' : 'dark',
     })
   }
+
+  // Must await to let virtual DOM cycle
+  await nextTick()
+
+  // Syncronize container scrolling
+  initializeSyncScroll()
+})
+
+onUnmounted(() => {
+  // Remove scrolling event listeners
+  destroySyncScroll()
 })
 </script>
 

src/composables/index.ts

@@ -3,11 +3,13 @@ import useKeyboardShortcuts from './useKeyboardShortcuts'
 import useMarkdownActions from './useMarkdownActions'
 import useMarkdownIt from './useMarkdownIt'
 import useShikiji from './useShikiji'
+import useSyncScroll from './useSyncScroll'
 
 export default {
   useDebounce,
   useKeyboardShortcuts,
   useMarkdownActions,
   useMarkdownIt,
   useShikiji,
+  useSyncScroll,
 }

src/composables/useKeyboardShortcuts.ts

@@ -6,7 +6,7 @@ import { KEYBOARD_SHORTCUTS } from '../constants'
 import type { InlineFormat } from '../types'
 
 /**
- * Utilize keyboard shortcuts in the markdown editor.
+ * Utilize keyboard shortcuts in the markdown editor. Must be called at the root of the `setup` function.
  * @param {string} textareaId The `id` of the textarea
  * @param {Ref<string>} rawMarkdown A Vue ref containing the raw markdown content from the textarea.
  * @param {Function} onEditCallback A function to call after toggling the inline text formatting.

src/composables/useSyncScroll.ts

@@ -0,0 +1,48 @@
+import type { Ref } from 'vue'
+
+export default function useSyncScroll(scrollableClass: Ref<string>) {
+  // Keep scroll containers in sync
+  const handleScroll = (e: Event) => {
+    const syncScroll = (scrolledEle: Element, ele: Element) => {
+      const scrolledPercent = scrolledEle.scrollTop / (scrolledEle.scrollHeight - scrolledEle.clientHeight)
+      const top = scrolledPercent * (ele.scrollHeight - ele.clientHeight)
+
+      const scrolledWidthPercent = scrolledEle.scrollLeft / (scrolledEle.scrollWidth - scrolledEle.clientWidth)
+      const left = scrolledWidthPercent * (ele.scrollWidth - ele.clientWidth)
+
+      ele.scrollTo({
+        behavior: 'instant', // must be instant
+        top,
+        left,
+      })
+    }
+
+    const scrolledEle = e.target
+
+    Array.from([...document.querySelectorAll(`.${scrollableClass.value}`)]).filter((item) => item !== scrolledEle).forEach((ele: Element) => {
+      ele.removeEventListener('scroll', handleScroll)
+      // @ts-ignore
+      syncScroll(scrolledEle, ele)
+      window.requestAnimationFrame(() => {
+        ele.addEventListener('scroll', handleScroll)
+      })
+    })
+  }
+
+  const initializeSyncScroll = (): void => {
+    document?.querySelectorAll(`.${scrollableClass.value}`)?.forEach((el) => {
+      el?.addEventListener('scroll', handleScroll)
+    })
+  }
+
+  const destroySyncScroll = (): void => {
+    document?.querySelectorAll(`.${scrollableClass.value}`)?.forEach((el) => {
+      el?.removeEventListener('scroll', handleScroll)
+    })
+  }
+
+  return {
+    initializeSyncScroll,
+    destroySyncScroll,
+  }
+}