feat(editor): generate docx

Novout · Dec 2, 2021 · 1e45bf7 · 1e45bf7
1 parent b6292a3
commit 1e45bf7
Show file tree

Hide file tree

Showing 9 changed files with 409 additions and 62 deletions.
diff --git a/package.json b/package.json
@@ -51,10 +51,12 @@
     "@vueuse/motion": "2.0.0-beta.4",
     "autoprefixer": "10.4.0",
     "date-fns": "2.26.0",
+    "docx": "7.2.0",
     "dropbox": "10.22.0",
     "electron-dl": "3.3.0",
     "electron-log": "4.4.1",
     "electron-updater": "4.6.1",
+    "file-saver": "2.0.5",
     "is-electron": "2.2.1",
     "keyboardjs": "2.6.4",
     "mitt": "3.0.0",
@@ -73,6 +75,7 @@
   },
   "devDependencies": {
     "@intlify/vite-plugin-vue-i18n": "3.2.1",
+    "@types/file-saver": "^2.0.4",
     "@types/jest": "27.0.3",
     "@types/jsdom": "16.2.13",
     "@types/pdfmake": "0.1.19",
@@ -116,7 +119,9 @@
         "axios",
         "date-fns",
         "date-fns/locale",
+        "docx",
         "dropbox",
+        "file-saver",
         "is-electron",
         "keyboardjs",
         "mitt",

diff --git a/src/components/editor/header/EditorHeaderItem.vue b/src/components/editor/header/EditorHeaderItem.vue
@@ -3,6 +3,7 @@
     class="flex px-2 justify-between items-center w-full cursor-pointer text-theme-editor-header-list-text hover:text-theme-editor-header-list-text-hover active:text-theme-editor-header-list-text-active bg-theme-editor-header-list-background hover:bg-theme-editor-header-list-background-hover active:bg-theme-editor-header-list-background-active"
     @click.prevent.stop="emit('action')"
   >
+    <slot name="icon"></slot>
     <p class="text-sm">{{ props.text }}</p>
     <p
       class="font-tiny rounded-full px-1 text-3xs bg-theme-editor-header-list-shortcuts-background hover:bg-theme-editor-header-list-shortcuts-background-hover active:bg-theme-editor-header-list-shortcuts-background-active"

diff --git a/src/components/editor/header/EditorHeaderItemDiv.vue b/src/components/editor/header/EditorHeaderItemDiv.vue
@@ -0,0 +1,5 @@
+<template>
+  <div
+    class="mt-2 mb-1 h-1 w-full px-5 border-t border-theme-background-2 bg-theme-transparent"
+  />
+</template>
diff --git a/src/components/editor/header/items/EditorBaseHeaderCreate.vue b/src/components/editor/header/items/EditorBaseHeaderCreate.vue
@@ -0,0 +1,133 @@
+<template>
+  <!-- Create -->
+  <EditorHeaderButton v-if="PROJECT.name !== env.projectEmpty()">
+    <template #icon>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        aria-hidden="true"
+        role="img"
+        width="21"
+        height="21"
+        preserveAspectRatio="xMidYMid meet"
+        viewBox="0 0 384 512"
+      >
+        <path
+          d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm76.45 211.36l-96.42 95.7c-6.65 6.61-17.39 6.61-24.04 0l-96.42-95.7C73.42 337.29 80.54 320 94.82 320H160v-80c0-8.84 7.16-16 16-16h32c8.84 0 16 7.16 16 16v80h65.18c14.28 0 21.4 17.29 11.27 27.36zM377 105L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1c0-6.3-2.5-12.4-7-16.9z"
+          fill="currentColor"
+        ></path>
+      </svg>
+    </template>
+    <template #bar>
+      <EditorHeaderItem
+        :text="t('editor.bar.pdf.configuration')"
+        shortcut="CTRL + G"
+        @action="pdf.external().onConfigurationPDF()"
+      >
+        <template #icon>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            aria-hidden="true"
+            role="img"
+            width="24"
+            height="24"
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M22 2H6v16h16V2zm-10.5 9H9v2H7.5V7h4v4zm5 .5c0 .83-.67 1.5-1.5 1.5h-2.5V7H15c.83 0 1.5.67 1.5 1.5v3zm4-3H19v1h1.5V11H19v2h-1.5V7h3v1.5zM9 9.5h1v-1H9v1zM4 6H2v16h16v-2H4V6zm10 5.5h1v-3h-1v3z"
+              fill="currentColor"
+            ></path>
+          </svg>
+        </template>
+      </EditorHeaderItem>
+      <EditorHeaderItem
+        :text="t('editor.bar.pdf.preview')"
+        shortcut="CTRL + Shift + G"
+        @action="ABSOLUTE.pdf.preview = true"
+      >
+        <template #icon>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            aria-hidden="true"
+            role="img"
+            width="24"
+            height="24"
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M22 2H6v16h16V2zm-10.5 9H9v2H7.5V7h4v4zm5 .5c0 .83-.67 1.5-1.5 1.5h-2.5V7H15c.83 0 1.5.67 1.5 1.5v3zm4-3H19v1h1.5V11H19v2h-1.5V7h3v1.5zM9 9.5h1v-1H9v1zM4 6H2v16h16v-2H4V6zm10 5.5h1v-3h-1v3z"
+              fill="currentColor"
+            ></path>
+          </svg>
+        </template>
+      </EditorHeaderItem>
+      <EditorHeaderItem
+        :text="t('editor.bar.pdf.generate')"
+        shortcut="CTRL + Alt + G"
+        @action="pdf.external().onGeneratePDF()"
+      >
+        <template #icon>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            aria-hidden="true"
+            role="img"
+            width="24"
+            height="24"
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M22 2H6v16h16V2zm-10.5 9H9v2H7.5V7h4v4zm5 .5c0 .83-.67 1.5-1.5 1.5h-2.5V7H15c.83 0 1.5.67 1.5 1.5v3zm4-3H19v1h1.5V11H19v2h-1.5V7h3v1.5zM9 9.5h1v-1H9v1zM4 6H2v16h16v-2H4V6zm10 5.5h1v-3h-1v3z"
+              fill="currentColor"
+            ></path>
+          </svg>
+        </template>
+      </EditorHeaderItem>
+      <EditorHeaderItemDiv />
+      <EditorHeaderItem
+        :text="t('editor.bar.pdf.generate')"
+        @action="docx.generate()"
+      >
+        <template #icon>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            aria-hidden="true"
+            role="img"
+            width="24"
+            height="24"
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 1024 1024"
+          >
+            <path
+              d="M854.6 288.7c6 6 9.4 14.1 9.4 22.6V928c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32h424.7c8.5 0 16.7 3.4 22.7 9.4l215.2 215.3zM790.2 326L602 137.8V326h188.2zM512 566.1l52.81 197a12 12 0 0 0 11.6 8.9h31.77a12 12 0 0 0 11.6-8.88l74.37-276a12 12 0 0 0 .4-3.12a12 12 0 0 0-12-12h-35.57a12 12 0 0 0-11.7 9.31l-45.78 199.1l-49.76-199.32A12 12 0 0 0 528.1 472h-32.2a12 12 0 0 0-11.64 9.1L434.6 680.01L388.5 481.3a12 12 0 0 0-11.68-9.29h-35.39a12 12 0 0 0-3.11.41a12 12 0 0 0-8.47 14.7l74.17 276A12 12 0 0 0 415.6 772h31.99a12 12 0 0 0 11.59-8.9l52.81-197z"
+              fill="currentColor"
+            ></path>
+          </svg>
+        </template>
+      </EditorHeaderItem>
+    </template>
+  </EditorHeaderButton>
+</template>
+
+<script setup lang="ts">
+  import { useAbsoluteStore } from '@/store/absolute'
+  import { useProjectStore } from '@/store/project'
+  import { useEnv } from '@/use/env'
+  import { usePDF } from '@/use/pdf'
+  import { useI18n } from 'vue-i18n'
+  import { useDocx } from '@/use/docx'
+
+  const ABSOLUTE = useAbsoluteStore()
+  const PROJECT = useProjectStore()
+
+  const env = useEnv()
+  const pdf = usePDF()
+  const docx = useDocx()
+  const { t } = useI18n()
+</script>
diff --git a/src/components/editor/header/items/EditorBaseHeaderPDF.vue b/src/components/editor/header/items/EditorBaseHeaderPDF.vue
diff --git a/src/components/editor/main/EditorBaseHeader.vue b/src/components/editor/main/EditorBaseHeader.vue
@@ -28,8 +28,8 @@
     <div class="flex flex-row items-center">
       <EditorBaseHeaderConfigurations />
       <EditorBaseHeaderProject />
+      <EditorBaseHeaderCreate />
       <EditorBaseHeaderDropbox />
-      <EditorBaseHeaderPDF />
       <EditorBaseHeaderChapters />
       <EditorBaseHeaderExternals />
     </div>

diff --git a/src/env.d.ts b/src/env.d.ts
@@ -37,3 +37,4 @@ declare module 'pdfmake/build/pdfmake' {
 }
 declare module 'node-fetch'
 declare module 'v-tooltip'
+declare module 'file-saver'