opit: rewrite export pdf and print

package-lock.json

@@ -12740,12 +12740,6 @@
         }
       }
     },
-    "raw-loader": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-0.5.1.tgz",
-      "integrity": "sha1-DD0L6u2KAclm2Xh793goElKpeao=",
-      "dev": true
-    },
     "rc": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",

package.json

@@ -192,7 +192,6 @@
     "node-loader": "^0.6.0",
     "postcss-loader": "^2.1.6",
     "postcss-preset-env": "^5.3.0",
-    "raw-loader": "^0.5.1",
     "require-dir": "^1.0.0",
     "spectron": "^3.8.0",
     "style-loader": "^0.21.0",

src/main/actions/file.js

@@ -226,7 +226,7 @@ export const exportFile = (win, type) => {
 }
 
 export const print = win => {
-  win.webContents.print({ silent: false, printBackground: true, deviceName: '' })
+  win.webContents.send('AGANI::print')
 }
 
 export const openFileOrProject = pathname => {

src/muya/lib/assets/styles/index.css

@@ -635,12 +635,12 @@ span.ag-warn.ag-emoji-marked-text {
   height: 1.1em;
   display: inline-block;
   vertical-align: middle;
-  background: url(./assets/icons/image.svg);
+  background: url(../icons/image.svg);
   background-size: contain;
 }
 
 .ag-image-marked-text.ag-image-fail::before {
-  background-image: url(./assets/icons/imagefail.svg);
+  background-image: url(../icons/imagefail.svg);
 }
 
 span[data-role="link"], a[data-role="link"], span[data-role="link"] .ag-backlash {

src/muya/lib/index.js

@@ -15,7 +15,7 @@ import TablePicker from './tablePicker'
 
 import './assets/symbolIcon' // import symbol icons
 import './assets/symbolIcon/index.css'
-import './index.css'
+import './assets/styles/index.css'
 
 class Muya {
   constructor (container, options) {
@@ -480,6 +480,11 @@ class Muya {
     return new ExportHtml(markdown).generate(filename)
   }
 
+  exportHtml () {
+    const { markdown } = this
+    return new ExportHtml(markdown).renderHtml()
+  }
+
   getWordCount (markdown) {
     return wordCount(markdown)
   }

src/renderer/app.vue

@@ -128,7 +128,7 @@
       dispatch('LISTEN_FOR_OPEN_SINGLE_FILE')
       dispatch('LISTEN_FOR_OPEN_BLANK_WINDOW')
       dispatch('LISTEN_FOR_SAVE_CLOSE')
-      dispatch('LISTEN_FOR_EXPORT')
+      dispatch('LISTEN_FOR_EXPORT_PRINT')
       dispatch('LISTEN_FOR_INSERT_IMAGE')
       dispatch('LISTEN_FOR_RENAME')
       dispatch('LINTEN_FOR_SET_LINE_ENDING')

src/renderer/assets/styles/index.css

@@ -0,0 +1,25 @@
+:root {
+  --primary: #409eff;
+  --info: #909399;
+  --warning: rgb(255, 130, 0);
+  --error: rgb(242, 19, 93); 
+  --lightBarColor: rgb(245, 245, 245);
+  --lightTabColor: rgb(243, 243, 243);
+  --darkBgColor: rgb(45, 45, 45);
+  --darkInputBgColor: rgb(54, 55, 49);
+  --darkInputColor: rgb(255, 255, 255);
+  --darkHoverColor: rgb(70, 70, 70);
+  --titleBarHeight: 25px;
+}
+.icon {
+  width: 1em; height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.text-overflow {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}

src/renderer/assets/styles/printService.css

@@ -0,0 +1,39 @@
+body article.print-container {
+  display: none;
+}
+@media print {
+  /* General rules for printing. */
+  body {
+    background: transparent none;
+  }
+
+  body > div {
+    display: none;
+  }
+
+  body article.print-container {
+    display: block;
+  }
+  body article.print-container {
+    height: 100%;
+  }
+  body article.markdown-body {
+    box-sizing: border-box;
+    min-width: 200px;
+    max-width: 980px;
+    margin: 0 auto;
+    padding: 45px;
+  }
+  body article.markdown-body table {
+    display: table;
+  }
+  body article.markdown-body input[type="checkbox"] ~ p {
+    margin-top: 0;
+    display: inline-block;
+  }
+  @media (max-width: 767px) {
+    body article.markdown-body {
+      padding: 15px;
+    }
+  }
+}

src/renderer/components/editorWithTabs/editor.vue

@@ -67,6 +67,7 @@
   import bus from '../../bus'
   import { animatedScrollTo } from '../../util'
   import { showContextMenu } from '../../contextMenu/editor'
+  import Printer from '@/services/printService'
 
   const STANDAR_Y = 320
   const PARAGRAPH_CMD = [
@@ -78,8 +79,7 @@
   export default {
     props: {
       filename: {
-        type: String,
-        required: true
+        type: String
       },
       theme: {
         type: String,
@@ -222,6 +222,7 @@
         bus.$on('editTable', this.handleEditTable)
         bus.$on('scroll-to-header', this.scrollToHeader)
         bus.$on('copy-block', this.handleCopyBlock)
+        bus.$on('print', this.handlePrint)
 
         // when cursor is in `![](cursor)` will emit `insert-image`
         this.editor.on('insert-image', type => {
@@ -351,17 +352,25 @@
         this.scrollToHighlight()
       },
 
-      async handleExport (type) {
+      handlePrint () {
+        const html = this.editor.exportHtml()
+        const printer = new Printer(html)
+        printer.print()
+      },
+
+      handleExport (type) {
+        const markdown = this.editor.getMarkdown()
         switch (type) {
           case 'styledHtml': {
-            const content = await this.editor.exportStyledHTML(this.filename)
-            const markdown = this.editor.getMarkdown()
+            const content = this.editor.exportStyledHTML(this.filename)
             this.$store.dispatch('EXPORT', { type, content, markdown })
             break
           }
 
           case 'pdf': {
-            const markdown = this.editor.getMarkdown()
+            const html = this.editor.exportHtml()
+            const printer = new Printer(html)
+            printer.renderMarkdown()
             this.$store.dispatch('EXPORT', { type, markdown })
             break
           }

src/renderer/components/editorWithTabs/index.vue

@@ -6,7 +6,7 @@
       <div class="container">
         <editor
           :theme="theme"
-          :fileanme="fileanme"
+          :fileanme="filename"
           :markdown="markdown"
           :cursor="cursor"
           :text-direction="textDirection"

src/renderer/index.css

@@ -1,64 +0,0 @@
-:root {
-  --primary: #409eff;
-  --info: #909399;
-  --warning: rgb(255, 130, 0);
-  --error: rgb(242, 19, 93); 
-  --lightBarColor: rgb(245, 245, 245);
-  --lightTabColor: rgb(243, 243, 243);
-  --darkBgColor: rgb(45, 45, 45);
-  --darkInputBgColor: rgb(54, 55, 49);
-  --darkInputColor: rgb(255, 255, 255);
-  --darkHoverColor: rgb(70, 70, 70);
-  --titleBarHeight: 25px;
-}
-.icon {
-  width: 1em; height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-}
-
-.text-overflow {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-@media print {
-  html, body {
-    background: #fff !important;
-  }
-  body .editor-with-tabs,
-  body .editor-wrapper,
-  body .editor-component {
-    height: auto !important;
-  }
-  body .editor-wrapper {
-    z-index: 1 !important;
-  }
-
-  body .editor-component #ag-editor-id,
-  body [contenteditable] {
-    caret-color: transparent !important;
-  }
-  h1.ag-active::before,
-  h2.ag-active::before,
-  h3.ag-active::before,
-  h4.ag-active::before,
-  h5.ag-active::before,
-  h6.ag-active::before {
-    content: none !important;
-  }
-
-  .source-code,
-  .title-bar,
-  .ag-remove,
-  .ag-emoji-marker,
-  .ag-table-tool-bar,
-  .editor-tabs,
-  .side-bar,
-  .CodeMirror-cursors,
-  .ag-hard-line-break {
-    display: none !important;
-  }
-}

src/renderer/main.js

@@ -6,10 +6,12 @@ import locale from 'element-ui/lib/locale'
 import App from './app'
 import store from './store'
 import './assets/symbolIcon'
-import './index.css'
 import { Dialog, Form, FormItem, InputNumber, Button, Tooltip, Upload, Slider, ColorPicker, Col, Row } from 'element-ui'
 import services from './services'
 
+import './assets/styles/index.css'
+import './assets/styles/printService.css'
+
 // import notice from './services/notification'
 // In the renderer process:
 // var webFrame = require('electron').webFrame

src/renderer/services/printService.js

@@ -0,0 +1,30 @@
+class MarkdownPrint {
+  constructor (html) {
+    this.html = html
+  }
+
+  renderMarkdown () {
+    this.clearup()
+    const { html } = this
+    const printContainer = document.createElement('article')
+    printContainer.classList.add('print-container')
+    printContainer.classList.add('markdown-body')
+    this.container = printContainer
+    document.body.appendChild(printContainer)
+    printContainer.innerHTML = html
+  }
+
+  print () {
+    this.renderMarkdown()
+    window.print()
+    this.clearup()
+  }
+
+  clearup () {
+    if (this.container) {
+      this.container.remove()
+    }
+  }
+}
+
+export default MarkdownPrint

src/renderer/store/editor.js

@@ -443,10 +443,13 @@ const actions = {
   },
 
   // listen for export from main process
-  LISTEN_FOR_EXPORT ({ commit, state }) {
+  LISTEN_FOR_EXPORT_PRINT ({ commit, state }) {
     ipcRenderer.on('AGANI::export', (e, { type }) => {
       bus.$emit('export', type)
     })
+    ipcRenderer.on('AGANI::print', e => {
+      bus.$emit('print')
+    })
   },
 
   EXPORT ({ commit, state }, { type, content, markdown }) {