feat: select to translate

Author: geekdada

package.json

@@ -32,6 +32,7 @@
  "@types/lodash-es": "^4.17.4",
  "@types/node": "^14",
  "@types/pino": "^6.3.4",
+ "@types/rangy": "^0.0.33",
  "@types/react": "^17.0.0",
  "@types/react-dom": "^17.0.0",
  "@types/uuid": "^8.3.0",
@@ -65,11 +66,13 @@
  "postcss-import": "^14.0.0",
  "postcss-loader": "^4.1.0",
  "prettier": "^2.2.1",
+ "rangy": "^1.3.0",
  "react": "^17.0.1",
  "react-dom": "^17.0.1",
  "react-draggable": "^4.4.3",
  "react-hot-loader": "^4.13.0",
  "sass-loader": "^10.1.0",
+ "smoothscroll-polyfill": "^0.4.4",
  "source-map-loader": "^1.1.3",
  "style-loader": "^2.0.0",
  "tailwindcss": "^2.0.2",

src/pages/Content/common/types.ts

@@ -1,9 +1,7 @@
 import { SupportLanguages } from '../../../common/types'
 
 export interface TextSelection {
- anchor?: Node
- anchorOffset?: number
- rangeCount?: number
+ parentElement?: HTMLElement
  sourceLang?: SupportLanguages
  text: string
 }

src/pages/Content/common/utils.ts

@@ -0,0 +1,3 @@
+export const getFirstRange = (sel: RangySelection): RangyRange | undefined => {
+ return sel.rangeCount ? sel.getRangeAt(0) : undefined
+}

src/pages/Content/components/TranslationItem.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react'
 
-import Client from '../../../common/api'
 import logger from '../../../common/logger'
 import { TranslateResult } from '../../../common/types'
 import client from '../common/client'
@@ -14,11 +13,24 @@ const TranslationItem: React.FC<{
  const [loading, setLoading] = useState(true)
  const [result, setResult] = useState<string>()
 
+ const findOriginal = () => {
+ const { parentElement } = job
+
+ if (!parentElement) {
+ return
+ }
+
+ window.scrollTo(0, parentElement.offsetTop - 20)
+ }
+
  useEffect(() => {
+ if (!config) return
+
  const res = client.send(
  'translate',
  {
- ...job,
+ text: job.text,
+ id: job.id,
  targetLang: config.targetLang,
  },
  true,
@@ -46,7 +58,7 @@ const TranslationItem: React.FC<{
  }, [job, config])
 
  return (
- <div className="ate_TranslationItem">
+ <div className="ate_TranslationItem" onClick={() => findOriginal()}>
  <div className="ate_TranslationItem__upper">
  <div>
  {job.text.length > 100 ? (

src/pages/Content/index.tsx

@@ -1,16 +1,25 @@
 import React from 'react'
 import { render } from 'react-dom'
+// @ts-ignore
+import smoothScrollPolyfill from 'smoothscroll-polyfill'
+import * as rangy from 'rangy'
+// @ts-ignore
+import 'rangy/lib/rangy-classapplier'
+import 'rangy/lib/rangy-highlighter'
 
 import logger from '../../common/logger'
 import { SupportLanguages } from '../../common/types'
 import translationStack from './common/translation-stack'
 import { TextSelection } 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 | undefined
+let lastSelection: (TextSelection & { selection: RangySelection }) | undefined
+let highlighter: any
+
 const main = async () => {
  const container = document.createElement('div')
  container.id = 'ate-container'
@@ -28,26 +37,43 @@ const main = async () => {
 
  window.addEventListener('load', () => {
  try {
- document.querySelector('body')?.append(iconContainer)
- document.querySelector('body')?.append(container)
+ // @ts-ignore
+ rangy.init()
+ // @ts-ignore
+ highlighter = rangy.createHighlighter()
+ // @ts-ignore
+ highlighter.addClassApplier(
+ // @ts-ignore
+ rangy.createClassApplier('ate-highlight', {
+ ignoreWhiteSpace: true,
+ tagNames: ['span', 'a'],
+ }),
+ )
+
+ document.querySelector<HTMLBodyElement>('body')?.append(iconContainer)
+ document.querySelector<HTMLBodyElement>('body')?.append(container)
 
  attachListeners()
 
  // TODO: remove before deploying
- initApp()
+ // initApp()
  } catch (err) {
  logger.error({
  err,
  })
  }
  })
+
+ if (!('scrollBehavior' in document.documentElement.style)) {
+ smoothScrollPolyfill.polyfill()
+ }
 }
 
 const onMouseUp = (e: MouseEvent) => {
- const selection = window.getSelection()
+ const selection = rangy.getSelection()
  const iconElement = document.querySelector<HTMLSpanElement>('#ate-icon')
 
- if (selection?.toString().trim() && iconElement) {
+ if (selection.toString().trim() && iconElement) {
  lastSelection = getTextSelection(selection)
  iconElement.style.top = e.pageY + 20 + 'px'
  iconElement.style.left = e.pageX + 'px'
@@ -73,24 +99,49 @@ const onClickTranslate = (selection: TextSelection) => {
 
 const attachListeners = () => {
  document.addEventListener('mouseup', onMouseUp, false)
- document.querySelector('#ate-icon')?.addEventListener('click', (e) => {
- logger.debug({
- msg: 'lastSelection',
- lastSelection,
+ document
+ .querySelector<HTMLSpanElement>('#ate-icon')
+ ?.addEventListener('click', function () {
+ logger.debug({
+ msg: 'lastSelection',
+ lastSelection,
+ })
+
+ if (lastSelection) {
+ highlightSelection(lastSelection.selection)
+
+ onClickTranslate({
+ text: lastSelection.text,
+ parentElement: lastSelection.parentElement,
+ sourceLang: lastSelection.sourceLang,
+ })
+
+ setTimeout(() => {
+ lastSelection?.selection.removeAllRanges()
+ this.classList.remove('active')
+ }, 0)
+ }
  })
- if (lastSelection) {
- onClickTranslate(lastSelection)
- }
- })
 }
 
-const getTextSelection = (selection: Selection): TextSelection => {
+const highlightSelection = (selection: RangySelection) => {
+ const range = getFirstRange(selection)
+
+ if (!range || !highlighter) {
+ return
+ }
+
+ highlighter.highlightSelection('ate-highlight')
+}
+
+const getTextSelection = (
+ selection: RangySelection,
+): TextSelection & { selection: RangySelection } => {
  const text = selection.toString().trim()
 
  return {
- anchor: selection.anchorNode?.parentElement ?? undefined,
- anchorOffset: selection.anchorOffset,
- rangeCount: selection.rangeCount,
+ selection,
+ parentElement: selection.anchorNode?.parentElement ?? undefined,
  sourceLang: getSourceLang(),
  text,
  }

src/pages/Content/providers/config.tsx

@@ -8,12 +8,6 @@ export type ConfigState = {
 
 export const ConfigContext = createContext<ConfigState | undefined>(undefined)
 
-export const useConfig = (): ConfigState => {
- const context = useContext(ConfigContext)
-
- if (context === undefined) {
- throw new Error('useConfig must be used within a ConfigContext.Provider')
- }
-
- return context
+export const useConfig = (): ConfigState | undefined => {
+ return useContext(ConfigContext)
 }

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

@@ -1,5 +1,5 @@
 .ate_TranslationItem {
- @apply text-gray-800 space-y-3 select-auto;
+ @apply p-3 text-gray-800 space-y-3 select-text cursor-pointer;
 
  &__upper {
  @apply space-y-3;

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

@@ -1,7 +1,7 @@
 .ate_TranslationList {
- @apply space-y-2 divide-y divide-gray-200 divide-solid;
+ @apply divide-y divide-gray-200 divide-solid;
 
  &__item {
- @apply p-3 border-l-0 border-r-0;
+ @apply border-l-0 border-r-0;
  }
 }

src/pages/Content/styles/index.scss

@@ -14,16 +14,18 @@
  left: 0;
  margin: 0;
  padding: 0;
-
- @apply select-none;
 }
 
 #ate-container {
  position: fixed;
+
+ @apply select-none;
 }
 
 #ate-icon-container {
  position: absolute;
+
+ @apply select-none;
 }
 
 #ate-icon {
@@ -45,3 +47,7 @@
 #ate-icon:hover {
  cursor: pointer;
 }
+
+.ate-highlight {
+ @apply bg-purple-200;
+}

yarn.lock

@@ -1416,6 +1416,11 @@
  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
  integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
 
+"@types/rangy@^0.0.33":
+ version "0.0.33"
+ resolved "https://registry.yarnpkg.com/@types/rangy/-/rangy-0.0.33.tgz#9f1afff01b4ba840360713a2c2ef3a36e7d49576"
+ integrity sha512-j2lhwVgbxZORhiB7yP+cly6+ow75MYmyHIkkSBwDl7XzrO5TMUECKkXqCf0pZVDjW5TgulIvhKg7SyEWSSgzmA==
+
 "@types/react-dom@^17.0.0":
  version "17.0.0"
  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.0.tgz#b3b691eb956c4b3401777ee67b900cb28415d95a"
@@ -6000,6 +6005,11 @@ range-parser@^1.2.1, range-parser@~1.2.1:
  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
  integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
 
+rangy@^1.3.0:
+ version "1.3.0"
+ resolved "https://registry.yarnpkg.com/rangy/-/rangy-1.3.0.tgz#b7c9a70aea05e5d8cdc74a8d4c8273d697271904"
+ integrity sha1-t8mnCuoF5djNx0qNTIJz1pcnGQQ=
+
 raw-body@2.4.0:
  version "2.4.0"
  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.0.tgz#a1ce6fb9c9bc356ca52e89256ab59059e13d0332"
@@ -6634,6 +6644,11 @@ slice-ansi@^4.0.0:
  astral-regex "^2.0.0"
  is-fullwidth-code-point "^3.0.0"
 
+smoothscroll-polyfill@^0.4.4:
+ version "0.4.4"
+ resolved "https://registry.yarnpkg.com/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz#3a259131dc6930e6ca80003e1cb03b603b69abf8"
+ integrity sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg==
+
 snapdragon-node@^2.0.1:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"