Merge branch 'feat-caption-html'

pwndoc · Jan 3, 2022 · f93fbdd · f93fbdd
2 parents 08748f2 + 0a576ca
commit f93fbdd
Show file tree

Hide file tree

Showing 9 changed files with 312 additions and 1,929 deletions.
diff --git a/backend/package-lock.json b/backend/package-lock.json
diff --git a/backend/package.json b/backend/package.json
@@ -24,7 +24,7 @@
     "bcrypt": "^3.0.6",
     "body-parser": "^1.17.1",
     "cookie-parser": "^1.4.5",
-    "docx": "^5.2.0",
+    "docx": "^7.0.0",
     "docx-templates": "^4.3.0",
     "docxtemplater": "^3.19.6",
     "docxtemplater-image-module-pwndoc": "github:pwndoc/docxtemplater-image-module-pwndoc",

diff --git a/backend/src/lib/html2ooxml.js b/backend/src/lib/html2ooxml.js
@@ -7,7 +7,7 @@ function html2ooxml(html, style = '') {
         return html
     if (!html.match(/^<.+>/))
         html = `<p>${html}</p>`
-    var doc = new docx.Document();
+    var doc = new docx.Document({sections:[]});
     var paragraphs = []
     var cParagraph = null
     var cRunProperties = {}
@@ -82,6 +82,13 @@ function html2ooxml(html, style = '') {
             else if (tag === "code") {
                 cRunProperties.style = "CodeChar"
             }
+            else if (tag === "legend" && attribs && attribs.alt !== "undefined") {
+                var label = attribs.label || "Figure"
+                cParagraph = new docx.Paragraph({style: "Caption", alignment: docx.AlignmentType.CENTER})
+                cParagraph.addChildElement(new docx.TextRun(`${label} `))
+                cParagraph.addChildElement(new docx.SimpleField(`SEQ ${label}`, '1'))
+                cParagraph.addChildElement(new docx.TextRun(` - ${attribs.alt}`))
+            }
         },
 
         ontext(text) {
@@ -92,7 +99,7 @@ function html2ooxml(html, style = '') {
         },
 
         onclosetag(tag) {
-            if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'p', 'pre', 'img'].includes(tag)) {
+            if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'p', 'pre', 'img', 'legend'].includes(tag)) {
                 paragraphs.push(cParagraph)
                 cParagraph = null
                 cParagraphProperties = {}
@@ -133,7 +140,7 @@ function html2ooxml(html, style = '') {
     parser.write(html)
     parser.end()
 
-    var prepXml = doc.document.body.prepForXml()
+    var prepXml = doc.documentWrapper.document.body.prepForXml({})
     var filteredXml = prepXml["w:body"].filter(e => {return Object.keys(e)[0] === "w:p"})
     var dataXml = xml(filteredXml)
 

diff --git a/backend/src/models/settings.js b/backend/src/models/settings.js
@@ -17,6 +17,10 @@ const SettingSchema = new Schema({
                 mediumColor: { type: String, default: "#f9a009", validate: [colorValidator, 'Invalid color'] },
                 highColor: { type: String, default: "#fe0000", validate: [colorValidator, 'Invalid color'] },
                 criticalColor: { type: String, default: "#212121", validate: [colorValidator, 'Invalid color'] }
+            },
+            captions: {
+                type: [{type: String, unique: true}],
+                default: ['Figure']
             }
         },
         private: {

diff --git a/frontend/src/components/editor-caption.js b/frontend/src/components/editor-caption.js
@@ -0,0 +1,77 @@
+import { Node, NodeSelection } from "tiptap";
+
+
+export default class Caption extends Node {
+  get name() {
+    return 'caption'
+  }
+
+  get schema() {
+    return {
+      attrs: {
+        label: {
+          default: "Figure"
+        },
+        alt: {
+          default: ""
+        }
+      },
+      group: "block",
+      draggable: true,
+      parseDOM: [
+        {
+          tag: "legend[alt]",
+          getAttrs: dom => ({
+            label: dom.getAttribute("label"),
+            alt: dom.getAttribute("alt")
+          })
+        }
+      ],
+      toDOM: node => ["legend", node.attrs]
+    }
+  }
+
+  commands({ type }) {
+    return (attrs) => (state, dispatch) => dispatch(state.tr.replaceSelectionWith(type.create(attrs)))
+  }
+
+  get view() {
+    return {
+      props: ["node", "updateAttrs"],
+      computed: {
+        label: {
+          get() {
+            return this.node.attrs.label
+          },
+          set(label) {
+            this.updateAttrs({
+              label
+            });
+          }
+        },
+        alt: {
+          get() {
+            return this.node.attrs.alt
+          },
+          set(alt) {
+            this.updateAttrs({
+              alt
+            });
+          }
+        }
+      },
+      template: `
+      <div style="margin: 0px auto 16px auto; display: table">
+        <div style="max-width:600px" class="cursor-pointer">
+          <span>{{label}} - </span>
+          <span v-if="alt" class="text-italic">{{alt}}</span>
+          <span v-else class="text-italic text-grey-7">Caption</span>
+        </div>
+        <q-popup-edit v-model="alt" auto-save>
+          <q-input style="width:600px" autofocus :prefix="label+' - '" v-model="alt" placeholder="Caption" />
+        </q-popup-edit>
+      </div>
+      `
+    };
+  }
+}
diff --git a/frontend/src/components/editor.vue b/frontend/src/components/editor.vue
@@ -4,6 +4,7 @@
         <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
             <q-toolbar class="editor-toolbar">
                 <div v-if="toolbar.indexOf('format') !== -1">
+                    <q-tooltip :delay="500" content-class="text-bold">Text Format</q-tooltip>
                     <q-btn-dropdown size="sm" unelevated dense :icon="formatIcon" :label="formatLabel" style="width:42px" class="text-bold">
                         <q-list dense>
                             <q-item 
@@ -60,27 +61,31 @@
                     :class="{ 'is-active': isActive.bold() }"
                     @click="commands.bold"
                     >
+                        <q-tooltip :delay="500" content-class="text-bold">Bold</q-tooltip>
                         <q-icon name="format_bold" />
                     </q-btn>
 
                     <q-btn flat size="sm" dense
                     :class="{ 'is-active': isActive.italic() }"
                     @click="commands.italic"
                     >
+                        <q-tooltip :delay="500" content-class="text-bold">Italic</q-tooltip>
                         <q-icon name="format_italic" />
                     </q-btn>
 
                     <q-btn flat size="sm" dense
                     :class="{ 'is-active': isActive.underline() }"
                     @click="commands.underline"
                     >
+                        <q-tooltip :delay="500" content-class="text-bold">Underline</q-tooltip>
                         <q-icon name="format_underline" />
                     </q-btn>
 
                     <q-btn flat size="sm" dense
                     :class="{ 'is-active': isActive.strike() }"
                     @click="commands.strike"
                     >
+                        <q-tooltip :delay="500" content-class="text-bold">Strikethrough</q-tooltip>
                         <q-icon name="format_strikethrough" />
                     </q-btn>
                 </div>
@@ -91,13 +96,15 @@
                     :class="{ 'is-active': isActive.bullet_list() }"
                     @click="commands.bullet_list"
                     >
+                        <q-tooltip :delay="500" content-class="text-bold">Bullets</q-tooltip>
                         <q-icon name="format_list_bulleted" />
                     </q-btn>
 
                     <q-btn flat size="sm" dense
                     :class="{ 'is-active': isActive.ordered_list() }"
                     @click="commands.ordered_list"
                     >
+                        <q-tooltip :delay="500" content-class="text-bold">Numbering</q-tooltip>
                         <q-icon name="format_list_numbered" />
                     </q-btn>
                 </div>
@@ -108,39 +115,60 @@
                     :class="{ 'is-active': isActive.code() }"
                     @click="commands.code"
                     >
+                        <q-tooltip :delay="500" content-class="text-bold">Code</q-tooltip>
                         <q-icon name="code" />
                     </q-btn>
 
                     <q-btn flat size="sm" dense
                     :class="{ 'is-active': isActive.code_block() }"
                     @click="commands.code_block"
                     >
+                        <q-tooltip :delay="500" content-class="text-bold">Code Block</q-tooltip>
                         <q-icon name="mdi-console" />
                     </q-btn>
                 </div>
                 <q-separator vertical class="q-mx-sm" v-if="toolbar.indexOf('code') !== -1" />
-
-                <label class="cursor-pointer" v-if="toolbar.indexOf('image') !== -1">
-                    <input
-                    type="file"
-                    accept="image/*"
-                    class="hidden"
-                    @change="importImage($event.target.files)"
-                    :disabled="!editable"
-                    />
-                    <q-icon name="image" />
-                </label>
+
+                <div v-if="toolbar.indexOf('image') !== -1">
+                    <q-tooltip :delay="500" content-class="text-bold">Insert Image</q-tooltip>
+                    <q-btn flat size="sm" dense>
+                        <label class="cursor-pointer">
+                            <input
+                            type="file"
+                            accept="image/*"
+                            class="hidden"
+                            @change="importImage($event.target.files)"
+                            :disabled="!editable"
+                            />
+                            <q-icon name="image" />
+                        </label>
+                    </q-btn>
+                </div>
                 <q-separator vertical class="q-mx-sm" v-if="toolbar.indexOf('image') !== -1" />
 
+                <div v-if="toolbar.indexOf('caption') !== -1">
+                    <q-tooltip :delay="500" content-class="text-bold">Insert Caption</q-tooltip>
+                    <q-btn-dropdown flat size="sm" dense icon="subtitles">
+                        <q-list dense>
+                            <q-item v-for="caption of $settings.report.public.captions" :key="caption" clickable v-close-popup @click="commands.caption({label: caption, alt: ''})">
+                                <q-item-section>{{caption}}</q-item-section>
+                            </q-item>
+                        </q-list>
+                    </q-btn-dropdown>
+                </div>
+                <q-separator vertical class="q-mx-sm" v-if="toolbar.indexOf('caption') !== -1" />
+
                 <q-btn flat size="sm" dense
                 @click="commands.undo"
                 >
+                    <q-tooltip :delay="500" content-class="text-bold">Undo</q-tooltip>
                     <q-icon name="undo" />
                 </q-btn>
 
                 <q-btn flat size="sm" dense
                 @click="commands.redo"
                 >
+                    <q-tooltip :delay="500" content-class="text-bold">Redo</q-tooltip>
                     <q-icon name="redo" />
                 </q-btn>
 
@@ -186,6 +214,7 @@ import {
 } from 'tiptap-extensions'
 
 import CustomImage from './editor-image'
+import Caption from './editor-caption'
 
 const Diff = require('diff')
 
@@ -203,7 +232,7 @@ export default {
         toolbar: {
             type: Array,
             default: function() {
-                return ['format', 'marks', 'list', 'code', 'image']
+                return ['format', 'marks', 'list', 'code', 'image', 'caption']
             }
         },
         noAffix: {
@@ -242,6 +271,7 @@ export default {
                     new Underline(),
                     new History(),
                     new CustomImage(),
+                    new Caption(),
                     new TrailingNode({node: 'paragraph', notAfter: ['paragraph', 'heading', 'bullet_list', 'ordered_list', 'code_block']})
                 ],
                 onUpdate: ({ getJSON, getHTML }) => {

diff --git a/frontend/src/i18n/en-US/index.js b/frontend/src/i18n/en-US/index.js
@@ -349,5 +349,7 @@ export default {
     merge: 'Merge',
     goBack: 'Go back',
     twoStepVerification: '2-Step Verification',
-    twoStepVerificationMessage: 'Open your authentication app and enter the security code it provides.'
+    twoStepVerificationMessage: 'Open your authentication app and enter the security code it provides.',
+    captions: 'Captions',
+    captionsDescription: 'Add Caption labels that will be used in the report (Default is \'Figure\')'
   }
diff --git a/frontend/src/pages/settings/settings.html b/frontend/src/pages/settings/settings.html
@@ -113,6 +113,30 @@
                         </q-item>
                     </q-list>
                 </q-card-section>
+                <q-separator />
+                <q-card-section>
+                    <div class="text-bold">{{$t('captions')}}</div>
+                    <br/>
+                    <div class="text-grey-8">{{$t('captionsDescription')}}</div>
+                    <br/>
+                    <q-item>
+                        <q-item-section class="col-md-6">
+                            <q-select
+                            label="Caption Labels'"
+                            stack-label
+                            outlined
+                            v-model="settings.report.public.captions"
+                            use-input
+                            use-chips
+                            multiple
+                            hide-dropdown-icon
+                            options-sanitize
+                            input-debounce="0"
+                            new-value-mode="add-unique"
+                        />
+                        </q-item-section>
+                    </q-item>
+                </q-card-section>
             </div>
         </q-card>
 

diff --git a/frontend/src/services/utils.js b/frontend/src/services/utils.js
@@ -8,6 +8,8 @@ export default {
     .replace(/</g, 'ΩΠг')
     .replace(/>/g, 'ΏΠг')
     .replace(/ΩΠгimg.+?src="(.*?)".+?alt="(.*?)".*?ΏΠг/g, '<img src="$1" alt="$2">')
+    .replace(/ΩΠгlegend.+?label="(.*?)".+?alt="(.*?)".*?ΏΠг/g, '<legend label="$1" alt="$2">')
+    .replace(/ΩΠг\/legendΏΠг/g, '</legend>')
     .replace(/ΩΠгpΏΠг/g, '<p>')
     .replace(/ΩΠг\/pΏΠг/g, '</p>')
     .replace(/ΩΠгpreΏΠг/g, '<pre>')