From edf4c45a6dbf1048011858abc686097918b743f2 Mon Sep 17 00:00:00 2001
From: sawka <mike.sawka@gmail.com>
Date: Tue, 9 Jul 2024 11:42:24 -0700
Subject: [PATCH] remove height calculation (flex seems to work), also
 synchronize meta.url with the real url

---
 frontend/app/view/webview.less |  4 +++
 frontend/app/view/webview.tsx  | 50 +++++++++++++++++++---------------
 2 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/frontend/app/view/webview.less b/frontend/app/view/webview.less
index daf37799a..137fcb35a 100644
--- a/frontend/app/view/webview.less
+++ b/frontend/app/view/webview.less
@@ -3,9 +3,12 @@
 
 .webview-wrapper {
     width: 100%;
+    display: flex;
+    flex-direction: column;
 
     .toolbar {
         display: flex;
+        flex-shrink: 0;
 
         .navigation {
             display: flex;
@@ -51,6 +54,7 @@
     }
 
     .webview {
+        flex-grow: 1;
         width: 100%;
         border-bottom-left-radius: 4px;
         border-bottom-right-radius: 4px;
diff --git a/frontend/app/view/webview.tsx b/frontend/app/view/webview.tsx
index ac0eb08a5..54570f615 100644
--- a/frontend/app/view/webview.tsx
+++ b/frontend/app/view/webview.tsx
@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Button } from "@/app/element/button";
-import { useParentHeight } from "@/app/hook/useParentHeight";
 import { getApi } from "@/app/store/global";
-import { WOS } from "@/store/global";
+import { WOS, useBlockAtom } from "@/store/global";
+import * as services from "@/store/services";
 import { WebviewTag } from "electron";
+import * as jotai from "jotai";
 import React, { memo, useEffect, useMemo, useRef, useState } from "react";
 
 import "./webview.less";
@@ -15,11 +16,23 @@ interface WebViewProps {
     parentRef: React.MutableRefObject<HTMLDivElement>;
 }
 
+function setBlockUrl(blockId: string, url: string) {
+    services.ObjectService.UpdateObjectMeta(WOS.makeORef("block", blockId), { url: url });
+}
+
 const WebView = memo(({ blockId, parentRef }: WebViewProps) => {
+    const blockAtom = WOS.getWaveObjectAtom<Block>(WOS.makeORef("block", blockId));
     const blockData = WOS.useWaveObjectValueWithSuspense<Block>(WOS.makeORef("block", blockId));
+    const urlAtom = useBlockAtom<string>(blockId, "webview:url", () => {
+        return jotai.atom((get) => {
+            const blockData = get(blockAtom);
+            return blockData?.meta?.url;
+        });
+    });
+    const realUrl = jotai.useAtomValue(urlAtom);
+    const [lastRealUrl, setLastRealUrl] = useState(realUrl);
     const initialUrl = useMemo(() => blockData?.meta?.url, []);
-    const [url, setUrl] = useState(initialUrl);
-    const [inputUrl, setInputUrl] = useState(initialUrl); // Separate state for the input field
+    const [inputUrl, setInputUrl] = useState(realUrl); // Separate state for the input field
     const [isLoading, setIsLoading] = useState(false);
 
     const webviewRef = useRef<WebviewTag>(null);
@@ -28,9 +41,12 @@ const WebView = memo(({ blockId, parentRef }: WebViewProps) => {
     const historyIndex = useRef<number>(-1);
     const recentUrls = useRef<{ [key: string]: number }>({});
 
-    const parentHeight = useParentHeight(parentRef);
-    const inputHeight = inputRef.current?.getBoundingClientRect().height || 0;
-    const webViewHeight = parentHeight - (inputHeight + 35);
+    useEffect(() => {
+        if (realUrl !== lastRealUrl) {
+            setLastRealUrl(realUrl);
+            setInputUrl(realUrl);
+        }
+    }, [realUrl, lastRealUrl]);
 
     useEffect(() => {
         historyStack.current.push(initialUrl);
@@ -43,7 +59,7 @@ const WebView = memo(({ blockId, parentRef }: WebViewProps) => {
             const normalizedLastUrl = normalizeUrl(historyStack.current[historyIndex.current]);
 
             if (normalizedLastUrl !== normalizedNewUrl) {
-                setUrl(normalizedNewUrl);
+                setBlockUrl(blockId, normalizedNewUrl);
                 setInputUrl(normalizedNewUrl); // Update input field as well
                 historyIndex.current += 1;
                 historyStack.current = historyStack.current.slice(0, historyIndex.current);
@@ -96,10 +112,6 @@ const WebView = memo(({ blockId, parentRef }: WebViewProps) => {
         }
     }, [initialUrl]);
 
-    // useEffect(() => {
-    //     setWebViewHeight(getWebViewHeight());
-    // }, [parentHeight, getWebViewHeight]);
-
     useEffect(() => {
         const handleKeyDown = (event: KeyboardEvent) => {
             if ((event.ctrlKey || event.metaKey) && event.key === "l") {
@@ -173,7 +185,7 @@ const WebView = memo(({ blockId, parentRef }: WebViewProps) => {
         const normalizedLastUrl = normalizeUrl(historyStack.current[historyIndex.current]);
 
         if (normalizedLastUrl !== normalizedFinalUrl) {
-            setUrl(normalizedFinalUrl);
+            setBlockUrl(blockId, normalizedFinalUrl);
             setInputUrl(normalizedFinalUrl);
             historyIndex.current += 1;
             historyStack.current = historyStack.current.slice(0, historyIndex.current);
@@ -192,7 +204,7 @@ const WebView = memo(({ blockId, parentRef }: WebViewProps) => {
             } while (historyIndex.current > 0 && isRecentUrl(historyStack.current[historyIndex.current]));
 
             const prevUrl = historyStack.current[historyIndex.current];
-            setUrl(prevUrl);
+            setBlockUrl(blockId, prevUrl);
             setInputUrl(prevUrl);
             if (webviewRef.current) {
                 webviewRef.current.src = prevUrl;
@@ -210,7 +222,7 @@ const WebView = memo(({ blockId, parentRef }: WebViewProps) => {
             );
 
             const nextUrl = historyStack.current[historyIndex.current];
-            setUrl(nextUrl);
+            setBlockUrl(blockId, nextUrl);
             setInputUrl(nextUrl);
             if (webviewRef.current) {
                 webviewRef.current.src = nextUrl;
@@ -288,13 +300,7 @@ const WebView = memo(({ blockId, parentRef }: WebViewProps) => {
                     />
                 </div>
             </div>
-            <webview
-                id="webview"
-                className="webview"
-                ref={webviewRef}
-                src={url}
-                style={{ height: webViewHeight }}
-            ></webview>
+            <webview id="webview" className="webview" ref={webviewRef} src={realUrl}></webview>
         </div>
     );
 });