Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-02 18:39:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

remove height calculation (flex seems to work), also synchronize meta.url with the real url

Browse Source
This commit is contained in:
sawka 2024-07-09 11:42:24 -07:00
parent 4be8a1e37e
commit edf4c45a6d
2 changed files with 32 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/app/view/webview.less
View File

@ -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;

50
frontend/app/view/webview.tsx
View File

@ -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>
);
});