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

@@ -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}
       />

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

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>

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}

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)
 

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: {