highlight links in text-ocr

fxnoob · fxnoob · commit e97cfd6c907f · 2021-05-13T20:36:39.000+05:30
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "text-to-image-pro",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "",
   "homepage": "https://fxnoob.github.io/image-to-text-landing",
   "scripts": {
@@ -70,6 +70,7 @@
     "@tailwindcss/ui": "^0.5.0",
     "array-contains": "^0.0.1",
     "firebase": "^8.4.3",
+    "linkifyjs": "^3.0.0-beta.3",
     "lottie-react-web": "^2.1.4",
     "pdfjs-dist": "2.5.207",
     "prop-types": "^15.7.2",
diff --git a/src/option-page/components/Home.js b/src/option-page/components/Home.js
@@ -1,10 +1,16 @@
 import React from "react";
+import Linkify from "linkifyjs/react";
 import Share from "./Share";
 import Promotion from "./Promotion";
 import constants from "../../../constants";
 import chromeService from "../../services/chromeService";
 import { getExtensionStoreLink, isGoogleChrome } from "../../services/helper";
 const extUrl = getExtensionStoreLink();
+const options = {
+  target: {
+    url: "_blank",
+  },
+};
 export default function OCRCard(props) {
   const [copied, setCopied] = React.useState(false);
   const [playing, togglePlay] = React.useState(false);
@@ -215,7 +221,9 @@ export default function OCRCard(props) {
                 }}
                 class="prose text-gray-500 mx-auto lg:max-w-none lg:row-start-1 lg:col-start-1"
               >
-                {ocrText}
+                <Linkify tagName="p" options={options}>
+                  {ocrText}
+                </Linkify>
               </div>
               <hr style={{ marginTop: "2rem" }} />
               <div
diff --git a/src/option-page/components/Pdf.js b/src/option-page/components/Pdf.js
@@ -1,6 +1,7 @@
 import React, { useCallback, useRef } from "react";
 import ArrowLeftICon from "@material-ui/icons/KeyboardBackspace";
 import ArrowRightICon from "@material-ui/icons/ArrowRightAlt";
+import Linkify from "linkifyjs/react";
 import pdfService from "../../services/pdfService";
 import { useDropzone } from "react-dropzone";
 import Share from "./Share";
@@ -9,6 +10,11 @@ import chromeService from "../../services/chromeService";
 import messagePassing from "../../services/messagePassing";
 import { getExtensionStoreLink, isGoogleChrome } from "../../services/helper";
 import pdf from "../../services/pdfService";
+const options = {
+  target: {
+    url: "_blank",
+  },
+};
 const extUrl = getExtensionStoreLink();
 let canvas = null;
 export default function PdfCard() {
@@ -356,7 +362,9 @@ export default function PdfCard() {
                 }}
                 className="prose text-gray-500 mx-auto lg:max-w-none lg:row-start-1 lg:col-start-1"
               >
-                {ocrText}
+                <Linkify tagName="p" options={options}>
+                  {ocrText}
+                </Linkify>
               </div>
               <hr style={{ marginTop: "2rem" }} />
               <div
diff --git a/src/option-page/option.html b/src/option-page/option.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <title>IMAGE TO TEXT (OCR)</title>
     <link rel="stylesheet" href="/style.css" />
   </head>
   <body>
diff --git a/yarn.lock b/yarn.lock
@@ -5566,6 +5566,11 @@ linkify-it@^2.0.0:
   dependencies:
     uc.micro "^1.0.1"
 
+linkifyjs@^3.0.0-beta.3:
+  version "3.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-3.0.0-beta.3.tgz#40697995d7ecf85c464924a30b9e98b1cd6fb253"
+  integrity sha512-aXq4WJs91NsETo5f9dQrt8Vx+OxAvzJAtR8lLgpum8PDjtCgstycwYbIkAjDGRV/YF1LlKKdbWyOpgMYgwgOvQ==
+
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
