Synchronize scrolling with textarea and preview

web-app/src/app.css

@@ -230,7 +230,7 @@ form label {
 }
 
 form label:has(textarea) {
-  max-inline-size: 65ch;
+  max-inline-size: 75ch;
 }
 
 form .file-field {

web-app/src/lib/components/WebsiteEditor.svelte

@@ -7,14 +7,23 @@
     title,
     children,
     fullPreview = false,
-    previewContent
+    previewContent,
+    previewScrollTop = 0
   } = $props<{
     id: string;
     title: string;
     children: Snippet;
     fullPreview?: boolean;
     previewContent: string;
+    previewScrollTop?: number;
   }>();
+
+  let previewElement: HTMLDivElement;
+
+  $effect(() => {
+    const scrollHeight = previewElement.scrollHeight - previewElement.clientHeight;
+    previewElement.scrollTop = (previewScrollTop / 100) * scrollHeight;
+  });
 </script>
 
 <input type="checkbox" id="toggle-mobile-preview" hidden />
@@ -43,7 +52,7 @@
   {@render children()}
 </div>
 
-<div class="preview">
+<div class="preview" bind:this={previewElement}>
   {#if fullPreview}
     <iframe src={previewContent} title="Preview"></iframe>
   {:else}

web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte

@@ -8,6 +8,15 @@
   import { API_BASE_PREFIX } from "$lib/utils";
 
   const { data, form } = $props<{ data: PageServerData; form: ActionData }>();
+
+  let previewContent = $state(data.home.main_content);
+  let mainContentTextarea: HTMLTextAreaElement;
+  let textareaScrollTop = $state(0);
+
+  const updateScrollPercentage = () => {
+    const { scrollTop, scrollHeight, clientHeight } = mainContentTextarea;
+    textareaScrollTop = (scrollTop / (scrollHeight - clientHeight)) * 100;
+  };
 </script>
 
 <SuccessOrError success={form?.success} message={form?.message} />
@@ -15,7 +24,8 @@
 <WebsiteEditor
   id={data.website.id}
   title={data.website.title}
-  previewContent={data.home.main_content}
+  {previewContent}
+  previewScrollTop={textareaScrollTop}
 >
   <section>
     <h2>Global</h2>
@@ -133,7 +143,14 @@
     >
       <label>
         Main content:
-        <textarea name="main-content" rows="20" required>{data.home.main_content}</textarea>
+        <textarea
+          name="main-content"
+          rows="20"
+          bind:value={previewContent}
+          bind:this={mainContentTextarea}
+          onscroll={updateScrollPercentage}
+          required>{data.home.main_content}</textarea
+        >
       </label>
 
       <button type="submit">Submit</button>

web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte

@@ -8,6 +8,15 @@
   import { API_BASE_PREFIX } from "$lib/utils";
 
   const { data, form } = $props<{ data: PageServerData; form: ActionData }>();
+
+  let previewContent = $state(data.article.main_content);
+  let mainContentTextarea: HTMLTextAreaElement;
+  let textareaScrollTop = $state(0);
+
+  const updateScrollPercentage = () => {
+    const { scrollTop, scrollHeight, clientHeight } = mainContentTextarea;
+    textareaScrollTop = (scrollTop / (scrollHeight - clientHeight)) * 100;
+  };
 </script>
 
 <SuccessOrError success={form?.success} message={form?.message} />
@@ -15,8 +24,9 @@
 <WebsiteEditor
   id={data.website.id}
   title={data.website.title}
-  previewContent={data.article.main_content ||
+  previewContent={previewContent ||
     "Put some markdown content in main content to see a live preview here"}
+  previewScrollTop={textareaScrollTop}
 >
   <section>
     <h2>Edit article</h2>
@@ -78,7 +88,14 @@
       </div>
       <label>
         Main content:
-        <textarea name="main-content" rows="20" required>{data.article.main_content}</textarea>
+        <textarea
+          name="main-content"
+          rows="20"
+          bind:value={previewContent}
+          bind:this={mainContentTextarea}
+          onscroll={updateScrollPercentage}
+          required>{data.article.main_content}</textarea
+        >
       </label>
 
       <button type="submit">Submit</button>