Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Implement the webview sandbox using a microfront end for rn to implement the full html renderer #2691

Merged
merged 17 commits into from
Feb 7, 2025
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat(mobile): add FullScreenWKWebView for iOS WebView layout
- Create custom WKWebView subclass to override safe area insets
- Enables full-screen WebView rendering without default padding

Signed-off-by: Innei <tukon479@gmail.com>
  • Loading branch information
Innei committed Feb 7, 2025
commit 380da1413e16686dd9c554889a7594a79100ab15
13 changes: 13 additions & 0 deletions apps/mobile/native/ios/SharedWebView/FullScreenWKWebview.swift
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
//
// FullScreenWKWebview.swift
// FollowNative
//
// Created by Innei on 2025/2/7.
//

import WebKit
class FullScreenWKWebView: WKWebView {
override var safeAreaInsets: UIEdgeInsets {
return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
}
}
7 changes: 4 additions & 3 deletions apps/mobile/native/ios/SharedWebView/SharedWebView.swift
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,13 @@ class WebViewView: ExpoView {
width: bounds.width,
height: WebViewManager.state.contentHeight
)

SharedWebViewModule.sharedWebView!.frame = rect
guard let webView = SharedWebViewModule.sharedWebView else {return }
webView.frame = rect
webView.scrollView.frame = rect


frame = rect
rctView.frame = rect

onContentHeightChange(["height": Float(rect.height)])

}
Expand Down
3 changes: 2 additions & 1 deletion apps/mobile/native/ios/SharedWebView/WebViewManager.swift
Original file line number Diff line number Diff line change
Expand Up @@ -166,9 +166,10 @@ enum WebViewManager {
)
configuration.userContentController.addUserScript(customSchemeScript)

let webView = WKWebView(frame: .zero, configuration: configuration)
let webView = WKWebView(frame: .zero, configuration: configuration)
webView.scrollView.isScrollEnabled = false
webView.scrollView.bounces = false
webView.scrollView.contentInsetAdjustmentBehavior = .never

webView.isOpaque = false
webView.backgroundColor = UIColor.clear
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export function EntryContentWebView(props: EntryContentWebViewProps) {
return (
<>
<View
style={{ height: contentHeight }}
style={{ height: contentHeight, transform: [{ translateY: 0 }] }}
onLayout={() => {
SharedWebViewModule.evaluateJavaScript(
`setEntry(JSON.parse(${JSON.stringify(JSON.stringify(entry))}))`,
Expand All @@ -50,6 +50,8 @@ export function EntryContentWebView(props: EntryContentWebViewProps) {
url={htmlUrl}
/>
</View>

<View className="bg-red h-24" />
{__DEV__ && (
<Portal>
<View className="absolute left-4 flex-row gap-4 bottom-safe-offset-2">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ export default function EntryDetailPage() {
const item = useEntry(entryId as string)

const insets = useSafeAreaInsets()

return (
<BottomTabBarHeightContext.Provider value={insets.bottom}>
<SafeNavigationScrollView
Expand Down
2 changes: 1 addition & 1 deletion apps/mobile/web-app/html-renderer/src/HTML.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export const HTML = <A extends keyof JSX.IntrinsicElements = "div">(props: HTMLP
[children, remarkOptions],
)

if (!markdownElement) return null
if (!markdownElement) return <div className="h-px" />
return (
<MarkdownRenderContainerRefContext.Provider value={refElement}>
<MemoedDangerousHTMLStyle>{katexStyle}</MemoedDangerousHTMLStyle>
Expand Down
Loading