feat: add an option to show/hide original text in translation, also closes #1492 (#1511)

apps/readest-app/src/utils/reload.ts

@@ -0,0 +1,7 @@
+import { RELOAD_BEFORE_SAVED_TIMEOUT_MS } from '@/services/constants';
+import { eventDispatcher } from './event';
+
+export const saveAndReload = async () => {
+  await eventDispatcher.dispatch('beforereload');
+  setTimeout(() => window.location.reload(), RELOAD_BEFORE_SAVED_TIMEOUT_MS);
+};

apps/readest-app/src/utils/style.ts

@@ -333,14 +333,23 @@ export const getFootnoteStyles = () => `
   }
 `;
 
-const getTranslationStyles = () => `
-  .translation-block-wrapper {
-    display: block !important;
-    margin: 0.5em 0 !important;
+const getTranslationStyles = (showSource: boolean) => `
+  .translation-source {
+  }
+  .translation-target {
   }
   .translation-target.hidden {
     display: none !important;
   }
+  .translation-target-block {
+    display: block !important;
+    ${showSource ? 'margin: 0.5em 0 !important;' : ''}
+  }
+  .translation-target-toc {
+    display: block !important;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 `;
 
 export interface ThemeCode {
@@ -424,11 +433,26 @@ export const getStyles = (viewSettings: ViewSettings, themeCode?: ThemeCode) =>
     viewSettings.invertImgColorInDark!,
     themeCode,
   );
-  const translationStyles = getTranslationStyles();
+  const translationStyles = getTranslationStyles(viewSettings.showTranslateSource!);
   const userStylesheet = viewSettings.userStylesheet!;
   return `${layoutStyles}\n${fontStyles}\n${colorStyles}\n${translationStyles}\n${userStylesheet}`;
 };
 
+export const applyTranslationStyles = (viewSettings: ViewSettings) => {
+  const styleId = 'translation-styles';
+
+  const existingStyle = document.getElementById(styleId);
+  if (existingStyle) {
+    existingStyle.remove();
+  }
+
+  const styleElement = document.createElement('style');
+  styleElement.id = styleId;
+  styleElement.textContent = getTranslationStyles(viewSettings.showTranslateSource);
+
+  document.head.appendChild(styleElement);
+};
+
 export const transformStylesheet = (vw: number, vh: number, css: string) => {
   const isMobile = ['ios', 'android'].includes(getOSPlatform());
   const fontScale = isMobile ? 1.25 : 1;

apps/readest-app/src/utils/walk.ts

@@ -22,9 +22,15 @@ export const walkTextNodes = (root: HTMLElement): HTMLElement[] => {
       }
       const hasDirectText =
         child.childNodes &&
-        Array.from(child.childNodes).some(
-          (node) => node.nodeType === Node.TEXT_NODE && node.textContent?.trim(),
-        );
+        Array.from(child.childNodes).some((node) => {
+          if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
+            return true;
+          }
+          if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).tagName === 'SPAN') {
+            return true;
+          }
+          return false;
+        });
       if (child.children.length === 0 && child.textContent?.trim()) {
         elements.push(child);
       } else if (hasDirectText) {