[frontend] Improve PDF handling in Content (#8174)

opencti-platform/opencti-front/package.json

@@ -25,6 +25,7 @@
     "analytics": "0.8.14",
     "apexcharts": "3.53.0",
     "axios": "1.7.7",
+    "buffer": "6.0.3",
     "ckeditor5-custom-build": "0.0.1",
     "classnames": "2.5.1",
     "convert": "5.4.0",
@@ -47,6 +48,7 @@
     "js-file-download": "0.4.12",
     "leaflet": "1.9.4",
     "lodash": "4.17.21",
+    "markdown-to-jsx": "7.5.0",
     "mdi-material-ui": "7.9.1",
     "moment": "2.30.1",
     "moment-timezone": "0.5.45",

opencti-platform/opencti-front/src/private/components/common/containers/ContainerAddStixCoreObjectsLine.jsx

@@ -276,6 +276,12 @@ export const ContainerAddStixCoreObjectsLine = createFragmentContainer(
         }
         ... on StixCyberObservable {
           observable_value
+          ... on StixFile {
+            hashes {
+              algorithm
+              hash
+            }
+          }
         }
         createdBy {
           id

opencti-platform/opencti-front/src/private/components/common/stix_core_objects/StixCoreObjectContent.jsx

@@ -17,6 +17,9 @@ import 'react-pdf/dist/esm/Page/TextLayer.css';
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import ReactMde from 'react-mde';
 import { interval } from 'rxjs';
+import { compiler } from 'markdown-to-jsx';
+import { renderToString } from 'react-dom/server';
+import { Buffer } from 'buffer';
 import StixCoreObjectMappableContent from './StixCoreObjectMappableContent';
 import TextFieldAskAI from '../form/TextFieldAskAI';
 import inject18n from '../../../../components/i18n';
@@ -413,13 +416,16 @@ class StixCoreObjectContentComponent extends Component {
     this.setState({ markdownSelectedTab: tab });
   }
 
-  handleDownloadPdf() {
+  async handleDownloadPdf() {
     const { currentFileId, currentContent } = this.state;
     const { stixCoreObject } = this.props;
     const regex = /<img[^>]+src=(\\?["'])[^'"]+\.gif\1[^>]*\/?>/gi;
-    const htmlData = currentContent
+    let htmlData = currentContent
       .replaceAll('id="undefined" ', '')
       .replaceAll(regex, '');
+    if (currentFileId.endsWith('.md')) {
+      htmlData = renderToString(compiler(htmlData, { wrapper: null }));
+    }
     const ret = htmlToPdfmake(htmlData, {
       imagesByReference: true,
       ignoreStyles: ['font-family'],
@@ -536,7 +542,7 @@ class StixCoreObjectContentComponent extends Component {
       && [...files, ...exportFiles].find((n) => n.id === currentFileId);
     const currentFileType = currentFile && currentFile.metaData.mimetype;
     const { innerHeight } = window;
-    const height = innerHeight - 270;
+    const height = innerHeight - 300;
     const isContentCompatible = isContainerWithContent(stixCoreObject.entity_type);
     return (
       <div className={classes.container} data-testid='sco-content-page'>

opencti-platform/opencti-front/src/private/components/workspaces/investigations/InvestigationAddStixCoreObjectsLine.tsx

@@ -287,6 +287,12 @@ export const InvestigationAddStixCoreObjectsLine = createFragmentContainer(
         ... on StixCyberObservable {
           observable_value
           x_opencti_description
+          ... on StixFile {
+            hashes {
+              algorithm
+              hash
+            }
+          }
         }
         ... on StixFile {
           observableName: name

opencti-platform/opencti-front/yarn.lock

@@ -7458,7 +7458,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"base64-js@npm:^1.1.2, base64-js@npm:^1.3.0":
+"base64-js@npm:^1.1.2, base64-js@npm:^1.3.0, base64-js@npm:^1.3.1":
   version: 1.5.1
   resolution: "base64-js@npm:1.5.1"
   checksum: 10/669632eb3745404c2f822a18fc3a0122d2f9a7a13f7fb8b5823ee19d1d2ff9ee5b52c53367176ea4ad093c332fd5ab4bd0ebae5a8e27917a4105a4cfc86b1005
@@ -7620,6 +7620,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"buffer@npm:6.0.3":
+  version: 6.0.3
+  resolution: "buffer@npm:6.0.3"
+  dependencies:
+    base64-js: "npm:^1.3.1"
+    ieee754: "npm:^1.2.1"
+  checksum: 10/b6bc68237ebf29bdacae48ce60e5e28fc53ae886301f2ad9496618efac49427ed79096750033e7eab1897a4f26ae374ace49106a5758f38fb70c78c9fda2c3b1
+  languageName: node
+  linkType: hard
+
 "bytes@npm:3.0.0":
   version: 3.0.0
   resolution: "bytes@npm:3.0.0"
@@ -12233,6 +12243,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ieee754@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "ieee754@npm:1.2.1"
+  checksum: 10/d9f2557a59036f16c282aaeb107832dc957a93d73397d89bbad4eb1130560560eb695060145e8e6b3b498b15ab95510226649a0b8f52ae06583575419fe10fc4
+  languageName: node
+  linkType: hard
+
 "ignore@npm:^5.1.1, ignore@npm:^5.2.0":
   version: 5.3.2
   resolution: "ignore@npm:5.3.2"
@@ -13988,7 +14005,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"markdown-to-jsx@npm:^7.4.1":
+"markdown-to-jsx@npm:7.5.0, markdown-to-jsx@npm:^7.4.1":
   version: 7.5.0
   resolution: "markdown-to-jsx@npm:7.5.0"
   peerDependencies:
@@ -15613,6 +15630,7 @@ __metadata:
     apexcharts: "npm:3.53.0"
     axios: "npm:1.7.7"
     babel-plugin-relay: "npm:17.0.0"
+    buffer: "npm:6.0.3"
     chokidar: "npm:3.6.0"
     ckeditor5-custom-build: "npm:0.0.1"
     classnames: "npm:2.5.1"
@@ -15654,6 +15672,7 @@ __metadata:
     jsdom: "npm:24.1.3"
     leaflet: "npm:1.9.4"
     lodash: "npm:4.17.21"
+    markdown-to-jsx: "npm:7.5.0"
     mdi-material-ui: "npm:7.9.1"
     moment: "npm:2.30.1"
     moment-timezone: "npm:0.5.45"