Context menu actions

package.json

@@ -45,6 +45,7 @@
     "cross-env": "^6.0.3",
     "dotenv": "^8.1.0",
     "file-saver": "^2.0.2",
+    "interweave": "^11.2.0",
     "little-loader": "^0.2.0",
     "lodash": "^4.17.15",
     "next": "^9.0.7",
@@ -57,6 +58,7 @@
     "react-inlinesvg": "^1.1.7",
     "react-to-print": "2.4.0",
     "reactstrap": "^8.0.1",
+    "urijs": "^1.19.1",
     "web-streams-polyfill": "^2.0.4",
     "webpack": "^4.41.0",
     "worker-loader": "^2.0.0"

reader/components/header/Header.jsx

@@ -13,10 +13,12 @@ const Header = () => {
       pdfMetadata,
       isThumbnailViewVisible,
       isOutlineViewVisible,
+      isEnhancementViewVisible,
       printContainerRef,
     },
     toggleIsThumbnailViewVisible,
     toggleIsOutlineViewVisible,
+    toggleIsEnhancementViewVisible,
   } = useContext(GlobalContext)
 
   return (
@@ -36,6 +38,13 @@ const Header = () => {
         >
           <Icon iconType="thumbnails" />
         </Button>
+        <Button
+          color="none"
+          active={isEnhancementViewVisible}
+          onClick={toggleIsEnhancementViewVisible}
+        >
+          <Icon iconType="paper_info" isActive={isEnhancementViewVisible} />
+        </Button>
       </div>
       <div className="item d-flex justify-content-center">
         <Button

reader/components/icons/Icon.jsx

@@ -13,6 +13,10 @@ import RightArrowIcon from './assets/right-arrow.svg'
 import RotateIcon from './assets/rotate.svg'
 import ZoomInIcon from './assets/zoom-in.svg'
 import ZoomOutIcon from './assets/zoom-out.svg'
+import CopyIcon from './assets/copy.svg'
+import WikiIcon from './assets/wiki.svg'
+import CreateNewAnnotationIcon from './assets/create-new-annotation.svg'
+import SearchIcon from './assets/search.svg'
 
 const mapNameToModule = name => {
   const iconMap = {
@@ -28,6 +32,10 @@ const mapNameToModule = name => {
     'zoom-in': ZoomInIcon,
     'zoom-out': ZoomOutIcon,
     rotate: RotateIcon,
+    copy: CopyIcon,
+    wiki: WikiIcon,
+    'create-new-annotation': CreateNewAnnotationIcon,
+    search: SearchIcon,
   }
 
   if (!(name in iconMap)) throw new Error(`Icon ${name} not found`)

reader/components/pdf-highlighter/PDFHighlighter.jsx

@@ -1,6 +1,5 @@
 import React, { cloneElement } from 'react'
 import ReactDom from 'react-dom'
-import throttle from '../../utils/throttle'
 import { getPageFromRange } from './utils/utils'
 import { groupRectsByPage } from './utils/rects'
 import withAppContext from '../../store/withAppContext'
@@ -17,34 +16,20 @@ class PDFHighlighter extends React.Component {
     position: {
       left: null,
       top: null,
+      height: null,
     },
     annotationId: null,
     selectedText: '',
   }
 
-  componentDidMount() {
-    document.addEventListener('selectionchange', this.onSelectionChange)
-    document.addEventListener('mouseup', this.onAfterSelection.bind(this))
+  onUpdateContextMenu = partialUpdate => {
+    this.setState(state => ({
+      ...state,
+      ...partialUpdate,
+    }))
   }
 
-  componentWillUnmount() {
-    document.removeEventListener('mouseup', this.onAfterSelection)
-  }
-
-  onSelectionChange = () => {
-    const selection = window.getSelection()
-
-    // no text was selected
-    // https://developer.mozilla.org/en-US/docs/Web/API/Selection/isCollapsed
-    if (selection.isCollapsed) {
-      this.setState({
-        isVisible: false,
-      })
-    }
-  }
-
-  @throttle(250)
-  onAfterSelection() {
+  handleOnMouseUp() {
     const {
       state: {
         pdfDocument: { pdfViewer },
@@ -97,28 +82,6 @@ class PDFHighlighter extends React.Component {
     })
   }
 
-  onUpdateContextMenu = ({
-    isVisible,
-    left,
-    top,
-    annotationId,
-    contextRoot,
-    width,
-    height,
-  }) => {
-    const pdfRect = contextRoot.getBoundingClientRect()
-    this.setState({
-      isVisible,
-      position: {
-        left: `${((left + width / 2) * 100) / pdfRect.width}%`,
-        top: `${(top * 100) / pdfRect.height}%`,
-        height: `${height}px`,
-      },
-      annotationId,
-      contextRoot,
-    })
-  }
-
   render() {
     const {
       contextRoot,
@@ -131,27 +94,33 @@ class PDFHighlighter extends React.Component {
 
     const children = cloneElement(this.props.children, {
       ...this.props,
+      handleOnMouseUp: this.handleOnMouseUp.bind(this),
     })
 
     const contextMenu =
       contextRoot &&
       ReactDom.createPortal(
         <ContextMenu
+          key={selectedText}
           isVisible={isVisible}
           left={left}
           top={top}
           rects={rects}
           height={height}
           selectedText={selectedText}
           annotationId={annotationId}
+          updateContextMenu={this.onUpdateContextMenu}
         />,
         contextRoot
       )
 
     return (
       <>
         {contextRoot && contextMenu}
-        <Highlights updateContextMenu={this.onUpdateContextMenu} />
+        <Highlights
+          updateContextMenu={this.onUpdateContextMenu}
+          currentAnnotationId={annotationId}
+        />
         {children}
       </>
     )

reader/components/pdf-highlighter/PDFHighlighter.scss

@@ -1,3 +1,5 @@
+@import "../bootstrap/core";
+
 $HIGHLIGHT_COLORS: (
   red: #e57373,
   yellow: #fff176,
@@ -21,23 +23,44 @@ $HIGHLIGHT_COLORS: (
   right: 0;
   bottom: 0;
 
+  .context-menu-icon {
+    width: 2rem;
+    height: 2rem;
+    padding: 0.1rem;
+    color: $gray-700;
+
+    &:hover,
+    &:focus {
+      color: $primary;
+    }
+
+    // remove Bootstrap's shadow
+     &.active,
+     &.active:focus {
+       box-shadow: none !important;
+     }
+  }
+
   .highlight-popup-animated {
     animation: tooltip 300ms ease-out forwards;
   }
 
   .highlight-popup {
-    width: 150px;
+    min-width: 150px;
+    max-width: 400px;
     background: #fafafa;
     padding: 10px;
     box-shadow: 0 0 13px -1px rgba(0,0,0,0.75);
     border-radius: 10px;
     z-index: 150;
 
+    .wiki-suggestions > a {
+      display: block;
+      height: auto;
 
-
-    > div > button {
-      max-height: 27px;
-      max-width: 27px;
+      .searchmatch {
+        font-weight: 600;
+      }
     }
 
     .dot {
@@ -57,8 +80,9 @@ $HIGHLIGHT_COLORS: (
 }
 
 .highlights-layer {
-  > section {
+  > button {
     position: absolute;
+    border-radius: 0;
   }
 
   .highlight {