feat: improve text rendering with hyphenation and configurable editor, …

…closes #2671 Signed-off-by: Innei <tukon479@gmail.com>
RSSNext · Feb 2, 2025 · 90e56cf · 90e56cf
1 parent e1bf881
commit 90e56cf
Show file tree

Hide file tree

Showing 8 changed files with 10 additions and 8 deletions.
diff --git a/.env.example b/.env.example
@@ -10,3 +10,5 @@ VITE_OPENPANEL_API_URL=
 EXPO_PUBLIC_API_URL=https://api.follow.is
 EXPO_PUBLIC_OPENPANEL_CLIENT_ID=
 EXPO_PUBLIC_OPENPANEL_API_URL=
+
+VITE_EDITOR=cursor
diff --git a/apps/renderer/debug_proxy.html b/apps/renderer/debug_proxy.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html lang="en">
   <head>
     <title>Debug Proxy</title>
 

diff --git a/apps/renderer/src/main.tsx b/apps/renderer/src/main.tsx
@@ -48,6 +48,6 @@ if (IN_ELECTRON) {
 ReactDOM.createRoot($container).render(
   <React.StrictMode>
     <RouterProvider router={router} />
-    <ClickToComponent editor="vscode-insiders" />
+    <ClickToComponent editor={import.meta.env.VITE_EDITOR} />
   </React.StrictMode>,
 )
diff --git a/apps/renderer/src/modules/entry-column/templates/list-item-template.tsx b/apps/renderer/src/modules/entry-column/templates/list-item-template.tsx
@@ -146,13 +146,13 @@ export function ListItem({
         >
           {entry.entries.title ? (
             <EntryTranslation
-              className={cn("break-all", lineClamp.title)}
+              className={cn("hyphens-auto", lineClamp.title)}
               source={entry.entries.title}
               target={translation?.title}
             />
           ) : (
             <EntryTranslation
-              className={cn("break-all", lineClamp.description)}
+              className={cn("hyphens-auto", lineClamp.description)}
               source={entry.entries.description}
               target={translation?.description}
             />

diff --git a/apps/renderer/src/modules/entry-content/components/EntryTitle.tsx b/apps/renderer/src/modules/entry-content/components/EntryTitle.tsx
@@ -97,7 +97,7 @@ export const EntryTitle = ({ entryId, compact }: EntryLinkProps) => {
           showTranslation={showAITranslation}
           source={entry.entries.title}
           target={translation.data?.title}
-          className="select-text"
+          className="select-text hyphens-auto"
         />
       </div>
       <div className="mt-2 text-[13px] font-medium text-zinc-500">

diff --git a/apps/renderer/src/modules/entry-content/index.desktop.tsx b/apps/renderer/src/modules/entry-content/index.desktop.tsx
@@ -202,7 +202,7 @@ export const EntryContent: Component<EntryContentProps> = ({
                           noMedia={noMedia}
                           accessory={contentAccessories}
                           as="article"
-                          className="prose !max-w-full dark:prose-invert prose-h1:text-[1.6em] prose-h1:font-bold"
+                          className="prose !max-w-full hyphens-auto dark:prose-invert prose-h1:text-[1.6em] prose-h1:font-bold"
                           style={stableRenderStyle}
                           renderInlineStyle={readerRenderInlineStyle}
                         >

diff --git a/apps/renderer/src/modules/entry-content/index.mobile.tsx b/apps/renderer/src/modules/entry-content/index.mobile.tsx
@@ -205,7 +205,7 @@ export const EntryContent: Component<{
                           mediaInfo={mediaInfo}
                           noMedia={noMedia}
                           as="article"
-                          className="prose !max-w-full dark:prose-invert prose-h1:text-[1.6em] prose-h1:font-bold"
+                          className="prose !max-w-full hyphens-auto dark:prose-invert prose-h1:text-[1.6em] prose-h1:font-bold"
                           renderInlineStyle={readerRenderInlineStyle}
                         >
                           {content}

diff --git a/apps/renderer/src/modules/entry-content/index.shared.tsx b/apps/renderer/src/modules/entry-content/index.shared.tsx
@@ -119,7 +119,7 @@ export const ReadabilityContent = ({ entryId, feedId }: { entryId: string; feedI
         feedId={feedId}
         entryId={entryId}
         as="article"
-        className="prose dark:prose-invert prose-h1:text-[1.6em] prose-h1:font-bold"
+        className="prose hyphens-auto dark:prose-invert prose-h1:text-[1.6em] prose-h1:font-bold"
       >
         {result?.content ?? ""}
       </EntryContentHTMLRenderer>