(feat) O3-4332: Add linkify support for attachments description (#2166)

* Add linkify support for attachments description esm * Update the yarn.lock * Add linkifyjs to the project * Remove extra wrapping of p tag --------- Co-authored-by: Vineet Sharma <[email protected]>
openmrs · Jan 10, 2025 · 583aa07 · 583aa07
1 parent 3381e4e
commit 583aa07
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 1 deletion.
diff --git a/packages/esm-patient-attachments-app/package.json b/packages/esm-patient-attachments-app/package.json
@@ -39,6 +39,8 @@
   "dependencies": {
     "@carbon/react": "^1.12.0",
     "@openmrs/esm-patient-common-lib": "^9.0.0",
+    "linkify-react": "^4.2.0",
+    "linkifyjs": "^4.2.0",
     "lodash-es": "^4.17.21",
     "react-grid-gallery": "^0.5.6",
     "react-html5-camera-photo": "^1.5.11"

diff --git a/packages/esm-patient-attachments-app/src/attachments/attachment-preview.component.tsx b/packages/esm-patient-attachments-app/src/attachments/attachment-preview.component.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { type Attachment, CloseIcon, useLayoutType } from '@openmrs/esm-framework';
 import styles from './attachment-preview.scss';
+import Linkify from 'linkify-react';
 
 interface AttachmentPreviewProps {
   attachmentToPreview: Attachment;
@@ -69,7 +70,9 @@ const AttachmentPreview: React.FC<AttachmentPreviewProps> = ({
       <div className={styles.rightPanel}>
         <h4 className={styles.title}>{attachmentToPreview.filename}</h4>
         {attachmentToPreview?.description ? (
-          <p className={styles.imageDescription}>{attachmentToPreview.description}</p>
+          <p className={styles.imageDescription}>
+            <Linkify options={{ target: '_blank' }}>{attachmentToPreview.description}</Linkify>
+          </p>
         ) : null}
       </div>
     </div>

diff --git a/yarn.lock b/yarn.lock
@@ -5891,6 +5891,8 @@ __metadata:
   dependencies:
     "@carbon/react": "npm:^1.12.0"
     "@openmrs/esm-patient-common-lib": "workspace:*"
+    linkify-react: "npm:^4.2.0"
+    linkifyjs: "npm:^4.2.0"
     lodash-es: "npm:^4.17.21"
     react-grid-gallery: "npm:^0.5.6"
     react-html5-camera-photo: "npm:^1.5.11"
@@ -19218,6 +19220,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"linkify-react@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "linkify-react@npm:4.2.0"
+  peerDependencies:
+    linkifyjs: ^4.0.0
+    react: ">= 15.0.0"
+  checksum: 10/d2e73abaf9ac2eff84f1dfd1bd0546748fa22225d80a40e76610ecfbe49097cc473118bf012c7b20df4966ed2f30c3eccfeb360c396f1c6b1e27906f92f00fbd
+  languageName: node
+  linkType: hard
+
+"linkifyjs@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "linkifyjs@npm:4.2.0"
+  checksum: 10/fdd72a2615d6ef288f7036937fb38c933368dd8732d3665e2e44ce855b3e3b42ba9f67a28c622172155b47264cb8b41681bfb93a1e74eee7b29bbe4f04087696
+  languageName: node
+  linkType: hard
+
 "lint-staged@npm:^14.0.1":
   version: 14.0.1
   resolution: "lint-staged@npm:14.0.1"