Merge pull request #14 from contentstack/CS-30332--set-images-as-refe…

…rences

CS 30332  fixes

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,68 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: '*'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v3
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v2
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v2
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+
+    #   If the Autobuild fails above, remove it and uncomment the following three lines. 
+    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+
+    # - run: |
+    #   echo "Run, Build Application using script"
+    #   ./location_of_script_within_repo/buildscript.sh
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v2

.github/workflows/jira.yml

@@ -0,0 +1,28 @@
+name: Create JIRA ISSUE
+on:
+  pull_request:
+    types: [opened]
+jobs:
+  security:
+    if: ${{ github.actor == 'dependabot[bot]' || github.actor == 'snyk-bot' || contains(github.event.pull_request.head.ref, 'snyk-fix-')  || contains(github.event.pull_request.head.ref, 'snyk-upgrade-')}}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Login into JIRA
+        uses: atlassian/gajira-login@master
+        env:
+          JIRA_BASE_URL: ${{ secrets.JIRA_BASE_URL }}
+          JIRA_USER_EMAIL: ${{ secrets.JIRA_USER_EMAIL }}
+          JIRA_API_TOKEN: ${{ secrets.JIRA_API_TOKEN }}
+      - name: Create a JIRA Issue
+        id: create
+        uses: atlassian/gajira-create@master
+        with:
+          project: ${{ secrets.JIRA_PROJECT }}
+          issuetype: ${{ secrets.JIRA_ISSUE_TYPE }}
+          summary: |
+            ${{ github.event.pull_request.title }}
+          description: |
+            PR: ${{ github.event.pull_request.html_url }}
+
+          fields: "${{ secrets.JIRA_FIELDS }}"

.github/workflows/sast-scan.yml

@@ -0,0 +1,11 @@
+name: SAST Scan
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+jobs:
+  security:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Horusec Scan
+        run: docker run -v /var/run/docker.sock:/var/run/docker.sock -v $(pwd):/src horuszup/horusec-cli:latest horusec start -p /src -P $(pwd)

.github/workflows/sca-scan.yml

@@ -0,0 +1,15 @@
+name: Source Composition Analysis Scan
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+jobs:
+  security:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@master
+      - name: Run Snyk to check for vulnerabilities
+        uses: snyk/actions/node@master
+        env:
+          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
+        with:
+          args: --all-projects

.github/workflows/secrets-scan.yml

@@ -0,0 +1,11 @@
+name: Secrets Scan
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+jobs:
+  security:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Gittyleaks
+        uses: gupy-io/gittyleaks-action@v0.1

CODEOWNERS

@@ -1 +1 @@
-* @contentstack/security-admin
+* @contentstack/security-admin @contentstack/ghost-admin

src/fromRedactor.tsx

@@ -32,7 +32,14 @@ const ELEMENT_TAGS: IHtmlToJsonElementTags = {
   IMG: (el: HTMLElement) => {
     let imageUrl = el.getAttribute('src')?.split(".") || ["png"]
     let imageType = imageUrl[imageUrl?.length - 1]
-    return { type: 'reference', attrs: { "asset-link": el.getAttribute('src'), default: true, "asset-type": `image/${imageType}`, "display-type": "display", "type": "asset" } }
+    const assetUid = el.getAttribute('asset_uid')
+    if(assetUid){
+
+        const splittedUrl =  el.getAttribute('src')?.split('/')! || [null]
+        const assetName = splittedUrl[splittedUrl?.length - 1]
+        return { type: 'reference', attrs: { "asset-name": assetName,"content-type-uid" : "sys_assets", "asset-link": el.getAttribute('src'), "asset-type": `image/${imageType}`, "display-type": "display", "type": "asset", "asset-uid": assetUid } }
+    }
+    return { type: 'img', attrs: { url: el.getAttribute('src') } }
   },
   LI: () => ({ type: 'li', attrs: {} }),
   OL: () => ({ type: 'ol', attrs: {} }),
@@ -46,7 +53,17 @@ const ELEMENT_TAGS: IHtmlToJsonElementTags = {
   TR: (el: HTMLElement) => ({ type: 'tr', attrs: {} }),
   TD: (el: HTMLElement) => ({ type: 'td', attrs: {} }),
   TH: (el: HTMLElement) => ({ type: 'th', attrs: {} }),
-  FIGURE: (el: HTMLElement) => ({ type: 'reference', attrs: { default: true, "display-type": "display", "type": "asset" } }),
+  // FIGURE: (el: HTMLElement) => ({ type: 'reference', attrs: { default: true, "display-type": "display", "type": "asset" } }),
+
+  FIGURE: (el: HTMLElement) => {
+    if (el.lastChild && el.lastChild.nodeName === 'P') {
+      return { type: 'figure', attrs: {} }
+    }
+    else {
+      return { type: 'img', attrs: {} }
+    }
+
+  },
   SPAN: (el: HTMLElement) => {
     return { type: 'span', attrs: {} }
   },
@@ -383,7 +400,7 @@ export const fromRedactor = (el: any, options?:IHtmlToJsonOptions) : IAnyObject
       const attrs = {
         type: 'grid-container',
         attrs: {
-          gutter
+          gutter  
         }
       }
       return jsx('element', attrs, children)
@@ -493,39 +510,61 @@ export const fromRedactor = (el: any, options?:IHtmlToJsonOptions) : IAnyObject
         sizeAttrs.width = el.style.width
         if (sizeAttrs.width[sizeAttrs.width.length - 1] === '%') {
           sizeAttrs.width = Number(sizeAttrs.width.slice(0, sizeAttrs.width.length - 1))
-        } else if (sizeAttrs.width.slice(sizeAttrs.width.length - 2) === 'px') {
-          sizeAttrs.width = (Number(sizeAttrs.width.slice(0, sizeAttrs.width.length - 2)) / window?.screen?.width || 1920) * 100
+        } 
+
+        else if (sizeAttrs.width.slice(sizeAttrs.width.length - 2) === 'px') {
+          sizeAttrs.width = Number(sizeAttrs.width.slice(0, sizeAttrs.width.length - 2))
         }
       }
       if (el.style?.['max-width']) {
         sizeAttrs['max-width'] = el.style['max-width']
         if (sizeAttrs['max-width'][sizeAttrs['max-width'].length - 1] === '%') {
           sizeAttrs['max-width'] = Number(sizeAttrs['max-width'].slice(0, sizeAttrs['max-width'].length - 1))
-        } else if (sizeAttrs['max-width'].slice(sizeAttrs['max-width'].length - 2) === 'px') {
+        } 
+
+        else if (sizeAttrs['max-width'].slice(sizeAttrs['max-width'].length - 2) === 'px') {
           sizeAttrs['max-width'] =
-            (Number(sizeAttrs['max-width'].slice(0, sizeAttrs['max-width'].length - 2)) / window?.screen?.width || 1920) * 100
+            Number(sizeAttrs['max-width'].slice(0, sizeAttrs['max-width'].length - 2))
         }
       }
       let captionElements = el.getElementsByTagName("FIGCAPTION")
-      if (captionElements?.[0]?.textContent) {
-        extraAttrs['asset-caption'] = captionElements?.[0]?.textContent
+
+      if (captionElements?.[0]) {
+        let caption = captionElements[0]
+        const captionElementsAttrs = caption.attributes
+        const captionAttrs = {}
+        if (captionElementsAttrs) {
+          Array.from(captionElementsAttrs).forEach((child: any) => {
+            captionAttrs[child.nodeName] = child.nodeValue
+          })
+        }
+        extraAttrs['captionAttrs'] = captionAttrs
+        extraAttrs['caption'] = captionElements?.[0]?.textContent
+
+      }
+      if (newChildren[0]?.type === 'img') {
+        elementAttrs = getFinalImageAttributes({elementAttrs, newChildren, extraAttrs, sizeAttrs})
+      }
+      if (newChildren[0]?.type === 'reference') {
+        elementAttrs = getReferenceAttributes({elementAttrs, newChildren, extraAttrs, sizeAttrs})
       }
       if (newChildren[0]?.type === 'a') {
-        const { link, target } = newChildren[0].attrs?.["redactor-attributes"]
-        extraAttrs['link'] = link
+        const { href, target } = newChildren[0].attrs?.["redactor-attributes"]
+        extraAttrs['anchorLink'] = href;
         if (target && target !== '') {
-          extraAttrs['target'] = true
+            extraAttrs['target'] = true;
+        }
+        const imageAttrs = newChildren[0].children;
+
+        if(imageAttrs[0].type === 'img'){
+        elementAttrs = getFinalImageAttributes({elementAttrs, newChildren : imageAttrs, extraAttrs, sizeAttrs})
+
+        }
+        if(imageAttrs[0].type === 'reference'){
+        elementAttrs = getReferenceAttributes({elementAttrs, newChildren: imageAttrs, extraAttrs, sizeAttrs})
         }
-        const imageAttrs = newChildren[0].children[0]
-        elementAttrs = getImageAttributes(elementAttrs, imageAttrs.attrs || {}, { ...extraAttrs, ...sizeAttrs })
-      }
-      if (newChildren[0]?.type === 'reference' && newChildren[0]?.attrs?.default) {
-        elementAttrs = getImageAttributes(
-          elementAttrs,
-          { ...newChildren[0].attrs, ...sizeAttrs },
-          { ...extraAttrs, ...sizeAttrs }
-        )
       }
+
       return jsx('element', elementAttrs, [{ text: '' }])
     }
 
@@ -713,3 +752,43 @@ const getImageAttributes = (elementAttrs: any, childAttrs: any, extraAttrs: any)
   }
   return elementAttrs
 }
+
+const getReferenceAttributes = ({elementAttrs, newChildren, extraAttrs, sizeAttrs} : any) => {
+
+  let { style } = elementAttrs.attrs;
+
+  extraAttrs['asset-caption'] = extraAttrs['caption'];
+
+  const childAttrs = { ...newChildren[0].attrs, ...sizeAttrs, style: { 'text-align': style['text-align'] }, position: extraAttrs.position }
+  extraAttrs = { ...extraAttrs, ...sizeAttrs }
+
+  if (!childAttrs.position) {
+    delete childAttrs.position
+  }
+
+  const referenceAttrs = getImageAttributes(elementAttrs, childAttrs, extraAttrs);
+
+  referenceAttrs.type = "reference";
+
+  return referenceAttrs
+}
+
+const getFinalImageAttributes = ({elementAttrs, newChildren, extraAttrs, sizeAttrs} : any) => {
+
+  let { style } = elementAttrs.attrs;
+
+  if (newChildren[0].attrs.width) {
+      sizeAttrs.width = newChildren[0].attrs.width.toString();
+  }
+
+  const childAttrs = { ...newChildren[0].attrs, ...sizeAttrs, style: { 'text-align': style['text-align'] }, caption: extraAttrs['caption'] }
+  extraAttrs = { ...extraAttrs, ...sizeAttrs }
+
+  if (!childAttrs.caption) {
+    delete childAttrs.caption
+  }
+
+  const imageAttrs = getImageAttributes(elementAttrs, childAttrs, extraAttrs);
+
+  return imageAttrs
+}