feat(content): add triple ctrl

src/background/server.ts

@@ -16,6 +16,8 @@ message.addListener((data, sender: browser.runtime.MessageSender) => {
       return fetchDictResult(data as MsgFetchDictResult)
     case MsgType.PreloadSelection:
       return preloadSelection()
+    case MsgType.GetClipboard:
+      return getClipboard()
   }
 })
 
@@ -46,6 +48,11 @@ function fetchDictResult (data: MsgFetchDictResult): Promise<{ result: any, id:
     return Promise.reject(err)
   }
 
+  if (process.env.NODE_ENV === 'development') {
+    console.log(`search ${data.text}`)
+    search = () => new Promise(resolve => setTimeout(() => resolve({ result: 'yeyeye' }), Math.random() * 5000 + 1000))
+  }
+
   return search(data.text)
     .then(result => ({ result, id: data.id }))
 }
@@ -60,3 +67,16 @@ function preloadSelection (): Promise<void> {
     .then(text => text || '')
     .catch(() => '')
 }
+
+function getClipboard (): Promise<string> {
+  if (process.env.NODE_ENV === 'development') {
+    return Promise.resolve('clipboard content')
+  } else {
+    const el = document.createElement('input')
+    document.body.appendChild(el)
+    el.focus()
+    document.execCommand('paste')
+    el.remove()
+    return Promise.resolve(el.value || '')
+  }
+}

src/content/components/DictItem/index.tsx

@@ -34,7 +34,7 @@ export type DictItemState = {
 export class DictItem extends React.PureComponent<DictItemProps & { t: TranslationFunction }, DictItemState> {
   bodyRef = React.createRef<HTMLElement>()
   prevItemHeight = 30
-  initStyle = { height: 10, opacity: 0 }
+  initStyle = { height: 30, opacity: 0 }
 
   state = {
     /** same as pros */
@@ -145,6 +145,13 @@ export class DictItem extends React.PureComponent<DictItemProps & { t: Translati
     })
   }
 
+  componentDidMount () {
+    this.props.updateItemHeight({
+      id: this.props.id,
+      height: this.state.visibleHeight + 20,
+    })
+  }
+
   render () {
     const {
       t,

src/content/components/DictPanelPortal/index.tsx

@@ -66,7 +66,7 @@ export default class DictPanelPortal extends React.Component<DictPanelPortalProp
     if (newSelection !== mutableArea.propsSelection) {
       mutableArea.propsSelection = newSelection
       // only re-calculate position when new selection is made
-      if (newSelection.selectionInfo.text && !nextProps.isPinned) {
+      if (newSelection.force || (newSelection.selectionInfo.text && !nextProps.isPinned)) {
         // restore height
         const panelWidth = nextProps.config.panelWidth
         const panelHeight = 30 + nextProps.config.dicts.selected.length * 30
@@ -82,20 +82,24 @@ export default class DictPanelPortal extends React.Component<DictPanelPortalProp
         //       40px  |                 |                        |
         //     +-------+                 |                        |
         // cursor
-        const { mouseX, mouseY } = newSelection
+        const { mouseX, mouseY, force } = newSelection
         const wWidth = window.innerWidth
         const wHeight = window.innerHeight
 
-        let x = mouseX + panelWidth + 80 <= wWidth
-          ? mouseX + 80
-          : mouseX - panelWidth - 80
-        if (x < 0) { x = 5 } // too left
+        let x = force
+          ? mouseX
+          : mouseX + panelWidth + 80 <= wWidth
+            ? mouseX + 80
+            : mouseX - panelWidth - 80
+        if (x < 0) { x = 10 } // too left
 
-        let y = mouseY > 60 ? mouseY - 60 : mouseY + 60 - 30
+        let y = force
+          ? mouseY
+          : mouseY > 60 ? mouseY - 60 : mouseY + 60 - 30
         if (y + panelHeight >= wHeight) {
           // too down
           // panel's max height is guaranteed to be 80% so it's safe to do this
-          y = wHeight - panelHeight - 5
+          y = wHeight - panelHeight - 10
         }
 
         return { x, y, height: panelHeight }

src/content/redux/modules/dictionaries.ts

@@ -14,6 +14,7 @@ import { MsgType, MsgFetchDictResult } from '@/typings/message'
 export const enum Actions {
   SEARCH_START = 'dicts/SEARCH_START',
   SEARCH_END = 'dicts/SEARCH_END',
+  RESTORE = 'dicts/RESTORE',
 }
 
 /*-----------------------------------------------*\
@@ -44,7 +45,6 @@ const initState: DictionariesState = {
       state[id] = {
         searchStatus: SearchStatus.OnHold,
         searchResult: null,
-        height: 30,
       }
       return state
     }, {}),
@@ -53,6 +53,20 @@ const initState: DictionariesState = {
 
 export default function reducer (state = initState, action): DictionariesState {
   switch (action.type) {
+    case Actions.RESTORE:
+      return {
+        ...state,
+        dicts: Object.keys(state.dicts).reduce((newDicts, id) => {
+          newDicts[id] =
+            state.dicts[id].searchStatus === SearchStatus.OnHold
+              ? state.dicts[id]
+              : {
+                searchStatus: SearchStatus.OnHold,
+                searchResult: null,
+              }
+          return newDicts
+        }, {})
+      }
     case ConfigActions.NEW_CONFIG: {
       const { selected }: { selected: DictID[] } = action.payload.dicts
       return isEqual(selected, Object.keys(state))
@@ -63,7 +77,6 @@ export default function reducer (state = initState, action): DictionariesState {
             newState[id] = state[id] || {
               searchStatus: SearchStatus.OnHold,
               searchResult: null,
-              height: 10,
             }
             return newState
           }, {})
@@ -122,6 +135,10 @@ export default function reducer (state = initState, action): DictionariesState {
 
 type Action = { type: Actions, payload?: any }
 
+export function restoreDicts (): Action {
+  return ({ type: Actions.RESTORE })
+}
+
 /** Search all selected dicts if id is not provided */
 export function searchStart (
   payload: {toOnhold: DictID[], toStart: DictID[], info: SelectionInfo }

src/content/redux/modules/selection.ts

@@ -23,6 +23,7 @@ const initState: SelectionState = {
   mouseY: 0,
   dbClick: false,
   ctrlKey: false,
+  force: false,
 }
 
 export default function reducer (state = initState, action): SelectionState {