feat(editor): print extension

src/components/QuasarTiptap.vue

@@ -72,6 +72,7 @@ import {
   OKatexBlock,
   OKatexInline,
   OFormatClear,
+  OPrint,
   RecommendedExtensions
 } from 'src/extentions'
 

src/components/buttons/OSimpleCommandBtn.vue

@@ -57,6 +57,7 @@ export default {
         indent: { icon: 'format_indent_increase', tooltip: this.$o.lang.editor.indent, isActive: false, command: this.commands.indent },
         outdent: { icon: 'format_indent_decrease', tooltip: this.$o.lang.editor.outdent, isActive: false, command: this.commands.outdent },
         format_clear: { icon: 'format_clear', tooltip: this.$o.lang.editor.removeFormat, isActive: false, command: this.commands.formatClear },
+        print: { icon: 'print', tooltip: this.$o.lang.editor.print, isActive: false, command: this.commands.print },
       }
     },
     config () {

src/data/editor.js

@@ -38,4 +38,6 @@ export const DefaultToolbar = [
   'separator',
   'undo',
   'redo',
+  'separator',
+  'print',
 ]

src/extentions/Print.js

@@ -0,0 +1,32 @@
+import { Extension } from 'tiptap'
+import { printHtml } from 'src/utils/print'
+
+export default class Print extends Extension {
+  get name () {
+    return 'print'
+  }
+
+  commands () {
+    return () => (_state, _dispatch, view) => {
+      const editorContent = view.dom.closest('.editor__content')
+      if (editorContent) {
+        printHtml(editorContent)
+        return true
+      }
+      return false
+    }
+  }
+
+  keys ({ view }) {
+    return {
+      'Mod-p': function (_state, _dispatch, view) {
+        const editorContent = view.dom.closest('.editor__content')
+        if (editorContent) {
+          printHtml(editorContent)
+          return true
+        }
+        return false
+      }
+    }
+  }
+}

src/extentions/dynamic.js

@@ -48,7 +48,8 @@ import {
   ODiagram,
   OKatexBlock,
   OKatexInline,
-  OFormatClear
+  OFormatClear,
+  OPrint,
 } from 'src/extentions'
 
 const classes = {
@@ -92,7 +93,8 @@ const classes = {
   ODiagram,
   OKatexBlock,
   OKatexInline,
-  OFormatClear
+  OFormatClear,
+  OPrint,
 }
 
 class DynamicClass {

src/extentions/index.js

@@ -31,6 +31,7 @@ export { default as OAlignment } from 'src/extentions/Alignment'
 export { default as OIndent } from 'src/extentions/Indent'
 export { default as OLineHeight } from 'src/extentions/LineHeight'
 export { default as OFormatClear } from 'src/extentions/FormatClear'
+export { default as OPrint } from 'src/extentions/Print'
 
 // --------------------------------------------------------------------------------
 // Exposed Extension List
@@ -71,6 +72,7 @@ export const QuasarTipTapExtensions = [
   'OKatexBlock',
   'OKatexInline',
   'OFormatClear',
+  'OPrint',
 ]
 
 export const RecommendedExtensions = [

src/pages/examples/all.vue

@@ -56,37 +56,6 @@ export default {
           }),
         ],
         toolbar: [
-          'add-more',
-          'separator',
-          'bold',
-          'italic',
-          'underline',
-          'strike',
-          'code',
-          'separator',
-          'heading',
-          'font-family',
-          'fore-color',
-          'back-color',
-          'format_clear',
-          'separator',
-          'align-dropdown',
-          'indent',
-          'outdent',
-          'line-height',
-          'separator',
-          'horizontal',
-          'bullet_list',
-          'ordered_list',
-          'todo_list',
-          'separator',
-          'blockquote',
-          'code_block',
-          'photo',
-          'table',
-          'separator',
-          'undo',
-          'redo',
         ]
       },
       isSlideShow: false,

src/utils/print.js

@@ -0,0 +1,60 @@
+/**
+ * Utils: print
+ * @see https://github.com/Leecason/element-tiptap/blob/master/src/utils/print.ts
+ */
+const IS_TEST = false
+
+export function printHtml (dom) {
+  let style = Array.from(document.querySelectorAll('style, link'))
+    .reduce((str, style) => str + style.outerHTML, '')
+  style = style.replace(new RegExp('statics/', 'g'), '/statics/')
+  style = style.replace(new RegExp('fonts/', 'g'), '/fonts/')
+
+  const content = style + `<section class="tiptap tiptap-editor quasar-tiptap">${dom.outerHTML}</section>`
+
+  if (IS_TEST) {
+    // open a new window, for test
+    let newWindow = window.open('print window', '_blank')
+    newWindow.document.write(content)
+    newWindow.document.close()
+  } else {
+    // iframe, for print
+    const iframe = document.createElement('iframe')
+    iframe.id = 'quasar-tiptap-iframe'
+    iframe.setAttribute('style', 'position: absolute; width: 0; height: 0; top: -10px; left: -10px;')
+    document.body.appendChild(iframe)
+
+    const frameWindow = iframe.contentWindow
+    const doc = iframe.contentDocument || (iframe.contentWindow && iframe.contentWindow.document)
+
+    if (doc) {
+      doc.open()
+      doc.write(content)
+      doc.close()
+    }
+
+    if (frameWindow) {
+      iframe.onload = function () {
+        try {
+          setTimeout(() => {
+            frameWindow.focus()
+            try {
+              if (!frameWindow.document.execCommand('print', false)) {
+                frameWindow.print()
+              }
+            } catch (e) {
+              frameWindow.print()
+            }
+            frameWindow.close()
+          }, 10)
+        } catch (err) {
+          console.error(err)
+        }
+
+        setTimeout(function () {
+          document.body.removeChild(iframe)
+        }, 100)
+      }
+    }
+  }
+}