refactor: should not keep parentElement

Author: geekdada

src/pages/Content/common/translation-stack.ts

@@ -1,6 +1,4 @@
-import { v4 as uuid } from 'uuid'
-
-import { TextSelection, TranslateJob } from './types'
+import { TranslateJob } from './types'
 
 class TranslationStack {
   stack: Array<TranslateJob> = []
@@ -19,17 +17,11 @@ class TranslationStack {
     this.onPush = undefined
   }
 
-  push(job: TextSelection) {
+  push(job: TranslateJob) {
     if (this.onPush) {
-      this.onPush({
-        ...job,
-        id: uuid(),
-      })
+      this.onPush(job)
     } else {
-      this.stack.push({
-        ...job,
-        id: uuid(),
-      })
+      this.stack.push(job)
     }
   }
 }

src/pages/Content/common/types.ts

@@ -1,11 +1,17 @@
 import { SupportLanguages } from '../../../common/types'
 
 export interface TextSelection {
+  text: string
+  selection: RangySelection
   parentElement?: HTMLElement
   sourceLang?: SupportLanguages
-  text: string
+  id?: string
+  anchorId?: string
 }
 
-export interface TranslateJob extends TextSelection {
+export interface TranslateJob {
   id: string
+  anchorId: string
+  text: string
+  sourceLang?: SupportLanguages
 }

src/pages/Content/components/TranslationItem.tsx

@@ -26,14 +26,17 @@ const TranslationItem: React.FC<{
   }, [job.text])
 
   const findOriginal = () => {
-    const { parentElement } = job
+    const { anchorId } = job
+    const parentElement = document.querySelector(`.${anchorId}`)
 
     if (!parentElement) {
       enqueueSnackbar('已找不到原文', { variant: 'info' })
       return
     }
 
-    window.scrollTo(0, parentElement.offsetTop - 20)
+    if (parentElement instanceof HTMLElement) {
+      window.scrollTo(0, parentElement.offsetTop - 20)
+    }
   }
 
   useEffect(() => {

src/pages/Content/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { render } from 'react-dom'
+import { v4 as uuid } from 'uuid'
 // @ts-ignore
 import smoothScrollPolyfill from 'smoothscroll-polyfill'
 import * as rangy from 'rangy'
@@ -11,14 +12,14 @@ import logger from '../../common/logger'
 import { SupportLanguages } from '../../common/types'
 import server from './common/server'
 import translationStack from './common/translation-stack'
-import { TextSelection } from './common/types'
+import { TextSelection, TranslateJob } from './common/types'
 import { getFirstRange } from './common/utils'
 import App from './components/App'
 import './styles/index.scss'
 import { TranslateJobsProvider } from './providers/translate-jobs'
 
 let isAppAttached = false
-let lastSelection: (TextSelection & { selection: RangySelection }) | undefined
+let lastSelection: TextSelection | undefined
 let highlighter: any
 
 const main = async () => {
@@ -85,7 +86,9 @@ const onMouseUp = (e: MouseEvent) => {
       return
     }
 
+    // update last selection
     lastSelection = getTextSelection(selection)
+
     iconElement.style.top = e.pageY + 20 + 'px'
     iconElement.style.left = e.pageX + 'px'
     iconElement.classList.add('active')
@@ -99,9 +102,9 @@ const onMouseUp = (e: MouseEvent) => {
   }
 }
 
-const onClickTranslate = (selection: TextSelection) => {
+const onClickTranslate = (job: TranslateJob) => {
   initApp()
-  translationStack.push(selection)
+  translationStack.push(job)
 }
 
 const attachListeners = () => {
@@ -116,11 +119,21 @@ const attachListeners = () => {
       })
 
       if (lastSelection) {
+        const id = uuid()
+        const anchorId = `ate_anchor_${id}`
+
+        if (lastSelection.selection.anchorNode?.parentElement) {
+          lastSelection.selection.anchorNode?.parentElement.classList.add(
+            anchorId,
+          )
+        }
+
         highlightSelection(lastSelection.selection)
 
         onClickTranslate({
+          anchorId,
+          id,
           text: lastSelection.text,
-          parentElement: lastSelection.parentElement,
           sourceLang: lastSelection.sourceLang,
         })
 
@@ -148,15 +161,12 @@ const highlightSelection = (selection: RangySelection) => {
   highlighter.highlightSelection('ate-highlight')
 }
 
-const getTextSelection = (
-  selection: RangySelection,
-): TextSelection & { selection: RangySelection } => {
+const getTextSelection = (selection: RangySelection): TextSelection => {
   const text = selection.toString().trim()
   // const html = selection.toHtml().trim()
 
   return {
     selection,
-    parentElement: selection.anchorNode?.parentElement ?? undefined,
     sourceLang: getSourceLang(),
     text,
   }

src/pages/Content/styles/components/App.scss

@@ -2,7 +2,7 @@
   position: absolute;
   width: 450px;
   height: 600px;
-  z-index: 99998;
+  z-index: 1;
   @apply bg-white shadow rounded-lg overflow-hidden flex flex-col;
 
   &--inactive {

src/pages/Content/styles/index.scss

@@ -13,7 +13,7 @@
     margin: 0;
     padding: 0;
     font-size: 16px;
-    z-index: 99997;
+    z-index: 999999;
 
     @apply font-sans leading-normal;
 }
@@ -32,7 +32,7 @@
 
 #ate-icon {
     display: none;
-    z-index: 99999;
+    z-index: 2;
     position: absolute;
     top: 0;
     left: 0;