From 1439d87f071dd6153519f56091e73f3fabf817b4 Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Fri, 3 Jan 2025 00:10:02 +0800
Subject: [PATCH] fix: improve Markdown rendering and UI adjustments in various
 components

- Updated TextField to ensure full width and flex behavior.
- Optimized MarkdownWeb to memoize parsed content for better performance.
- Adjusted Markdown rendering in rsshub-form and DiscoverFeedForm to fix directive formatting.
- Enhanced ModalError to allow text selection in error stack trace.
- Minor adjustments in parse-markdown utility for directive handling.

These changes enhance the user interface and improve performance in Markdown rendering.

Signed-off-by: Innei <tukon479@gmail.com>
---
 apps/mobile/src/components/ui/form/TextField.tsx         | 2 +-
 apps/mobile/src/components/ui/typography/MarkdownWeb.tsx | 3 ++-
 apps/mobile/src/screens/(modal)/rsshub-form.tsx          | 5 ++++-
 apps/renderer/src/components/errors/ModalError.tsx       | 2 +-
 apps/renderer/src/modules/discover/DiscoverFeedForm.tsx  | 5 +++--
 packages/components/src/utils/parse-markdown.tsx         | 3 ++-
 6 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/apps/mobile/src/components/ui/form/TextField.tsx b/apps/mobile/src/components/ui/form/TextField.tsx
index 41ce189803..408e5b5dc9 100644
--- a/apps/mobile/src/components/ui/form/TextField.tsx
+++ b/apps/mobile/src/components/ui/form/TextField.tsx
@@ -23,7 +23,7 @@ export const TextField: FC<TextInputProps & TextFieldProps> = ({
       style={wrapperStyle}
     >
       <TextInput
-        className={cn("text-text placeholder:text-placeholder-text", className)}
+        className={cn("text-text placeholder:text-placeholder-text w-full flex-1", className)}
         style={StyleSheet.flatten([styles.textField, style])}
         {...rest}
       />
diff --git a/apps/mobile/src/components/ui/typography/MarkdownWeb.tsx b/apps/mobile/src/components/ui/typography/MarkdownWeb.tsx
index d77421ad26..47833fad01 100644
--- a/apps/mobile/src/components/ui/typography/MarkdownWeb.tsx
+++ b/apps/mobile/src/components/ui/typography/MarkdownWeb.tsx
@@ -3,6 +3,7 @@ import "@/src/global.css"
 
 import { parseMarkdown } from "@follow/components/src/utils/parse-markdown"
 import { cn } from "@follow/utils"
+import { useMemo } from "react"
 import { useDarkMode } from "usehooks-ts"
 
 import { useCSSInjection } from "@/src/theme/web"
@@ -13,7 +14,7 @@ const MarkdownWeb: WebComponent<{ value: string }> = ({ value }) => {
   const { isDarkMode } = useDarkMode()
   return (
     <div className={cn("text-text prose min-w-0", isDarkMode ? "prose-invert" : "prose")}>
-      {parseMarkdown(value).content}
+      {useMemo(() => parseMarkdown(value).content, [value])}
     </div>
   )
 }
diff --git a/apps/mobile/src/screens/(modal)/rsshub-form.tsx b/apps/mobile/src/screens/(modal)/rsshub-form.tsx
index e01db16bda..ce072434e8 100644
--- a/apps/mobile/src/screens/(modal)/rsshub-form.tsx
+++ b/apps/mobile/src/screens/(modal)/rsshub-form.tsx
@@ -158,7 +158,10 @@ function FormImpl({ route, routePrefix, name }: RsshubFormParams) {
         <Maintainers maintainers={route.maintainers} />
 
         <View className="mx-4 mt-4">
-          <MarkdownWeb value={route.description} dom={{ matchContents: true }} />
+          <MarkdownWeb
+            value={route.description.replaceAll("::: ", ":::")}
+            dom={{ matchContents: true, scrollEnabled: false }}
+          />
         </View>
       </KeyboardAwareScrollView>
     </PortalProvider>
diff --git a/apps/renderer/src/components/errors/ModalError.tsx b/apps/renderer/src/components/errors/ModalError.tsx
index 1b14fa6fba..4bb89ac089 100644
--- a/apps/renderer/src/components/errors/ModalError.tsx
+++ b/apps/renderer/src/components/errors/ModalError.tsx
@@ -26,7 +26,7 @@ const ModalErrorFallback: FC<AppErrorFallbackProps> = (props) => {
         </div>
         <div className="text-lg font-bold">{message}</div>
         {import.meta.env.DEV && stack ? (
-          <pre className="mt-4 max-h-48 cursor-text overflow-auto whitespace-pre-line rounded-md bg-red-50 p-4 text-left font-mono text-sm text-red-600">
+          <pre className="mt-4 max-h-48 cursor-text select-text overflow-auto whitespace-pre-line rounded-md bg-red-50 p-4 text-left font-mono text-sm text-red-600">
             {attachOpenInEditor(stack)}
           </pre>
         ) : null}
diff --git a/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx b/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx
index 007b36884d..158c7a5f7a 100644
--- a/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx
+++ b/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx
@@ -79,7 +79,8 @@ const FeedDescription = ({ description }: { description?: string }) => {
     <>
       <p>{t("discover.feed_description")}</p>
       <Markdown className="w-full max-w-full cursor-text select-text break-all prose-p:my-1">
-        {description}
+        {/* Fix markdown directive */}
+        {description.replaceAll("::: ", ":::")}
       </Markdown>
     </>
   )
@@ -248,7 +249,7 @@ export const DiscoverFeedForm = ({
       )}
       <form className="flex flex-col gap-4" onSubmit={form.handleSubmit(onSubmit)} ref={formElRef}>
         {keys.map((keyItem) => {
-          const parameters = normalizeRSSHubParameters(route.parameters[keyItem.name])
+          const parameters = normalizeRSSHubParameters(route.parameters?.[keyItem.name])
 
           const formRegister = form.register(keyItem.name)
 
diff --git a/packages/components/src/utils/parse-markdown.tsx b/packages/components/src/utils/parse-markdown.tsx
index e8ef6daa7b..c60fac974b 100644
--- a/packages/components/src/utils/parse-markdown.tsx
+++ b/packages/components/src/utils/parse-markdown.tsx
@@ -24,16 +24,17 @@ export const parseMarkdown = (content: string, options?: Partial<RemarkOptions>)
   const { components } = options || {}
 
   const pipeline = unified()
+    .use(remarkDirective)
     .use(remarkParse)
 
     .use(remarkGfm)
     .use(remarkGithubAlerts)
 
-    .use(remarkDirective)
     .use(remarkCalloutDirectives, {
       aliases: {
         danger: "deter",
         tip: "note",
+        warning: "warn",
       },
       callouts: {
         note: {