From e41b9636668e5ff4a9cd97880851452835d8c2c9 Mon Sep 17 00:00:00 2001
From: thiloho <123883702+thiloho@users.noreply.github.com>
Date: Sat, 17 Aug 2024 16:05:14 +0200
Subject: [PATCH] Synchronize scrolling with textarea and preview

---
 web-app/src/app.css                           |  2 +-
 .../src/lib/components/WebsiteEditor.svelte   | 13 ++++++++++--
 .../website/[websiteId]/+page.svelte          | 21 +++++++++++++++++--
 .../articles/[articleId]/+page.svelte         | 21 +++++++++++++++++--
 4 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/web-app/src/app.css b/web-app/src/app.css
index 7034160..940eda4 100644
--- a/web-app/src/app.css
+++ b/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 {
diff --git a/web-app/src/lib/components/WebsiteEditor.svelte b/web-app/src/lib/components/WebsiteEditor.svelte
index a245f30..68a6dde 100644
--- a/web-app/src/lib/components/WebsiteEditor.svelte
+++ b/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}
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
index fe3e319..f988edd 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
+++ b/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>
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte
index 9fe1c94..ebf3a9d 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte
+++ b/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>