feat: ✨ add Preview extension

src/components/MenuCommands/CommandButton.vue

@@ -47,6 +47,7 @@ import 'vue-awesome/icons/redo';
 import 'vue-awesome/icons/expand';
 import 'vue-awesome/icons/compress';
 import 'vue-awesome/icons/print';
+import 'vue-awesome/icons/eye';
 
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import { Tooltip } from 'element-ui';

src/components/MenuCommands/PreviewCommandButton.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <command-button
+      :command="togglePreviewDialogVisible"
+      :tooltip="t('editor.extensions.Preview.tooltip')"
+      icon="eye"
+    />
+
+    <el-dialog
+      :title="t('editor.extensions.Preview.dialog.title')"
+      :visible.sync="previewDialogVisible"
+      :width="contentWidth"
+    >
+      <div class="el-tiptap-editor__content">
+        <div v-html="html"></div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Watch, Mixins } from 'vue-property-decorator';
+import { Dialog } from 'element-ui';
+import { MenuData } from 'tiptap';
+import { PREVIEW_WINDOW_WIDTH } from '@/constants';
+import i18nMixin from '@/mixins/i18nMixin';
+import CommandButton from './CommandButton.vue';
+
+@Component({
+  components: {
+    [Dialog.name]: Dialog,
+    CommandButton,
+  },
+})
+export default class PreviewCommandButton extends Mixins(i18nMixin) {
+  @Prop({
+    type: Object,
+    required: true,
+  })
+  readonly editorContext!: MenuData;
+
+  @Prop({
+    type: String,
+    default: PREVIEW_WINDOW_WIDTH,
+  })
+  readonly contentWidth!: string;
+
+  html: string = '';
+  previewDialogVisible: boolean = false;
+
+  @Watch('previewDialogVisible')
+  onVisibleChange (visible: boolean) {
+    if (visible) this.getHtml();
+  }
+
+  togglePreviewDialogVisible () {
+    this.previewDialogVisible = !this.previewDialogVisible;
+  }
+
+  getHtml () {
+    this.html = this.editorContext.editor.getHTML();
+  }
+}
+</script>

src/constants.ts

@@ -39,3 +39,5 @@ export const enum EVENTS {
   DROP = 'drop',
   UPDATE = 'update',
 };
+
+export const PREVIEW_WINDOW_WIDTH: string = '80vw';

src/extensions/index.ts

@@ -41,3 +41,4 @@ export { default as LineHeight } from './line_height';
 export { default as FormatClear } from './format_clear';
 export { default as Fullscreen } from './fullscreen';
 export { default as Print } from './print';
+export { default as Preview } from './preview';

src/extensions/preview.ts

@@ -0,0 +1,26 @@
+import { Extension, MenuData } from 'tiptap';
+import { MenuBtnView } from '@/../types';
+import { PREVIEW_WINDOW_WIDTH } from '@/constants';
+import PreviewCommandButton from '@/components/MenuCommands/PreviewCommandButton.vue';
+
+export default class Preview extends Extension implements MenuBtnView {
+  get name () {
+    return 'preview';
+  }
+
+  get defaultOptions () {
+    return {
+      contentWidth: PREVIEW_WINDOW_WIDTH,
+    };
+  }
+
+  menuBtnView (editorContext: MenuData) {
+    return {
+      component: PreviewCommandButton,
+      componentProps: {
+        editorContext,
+        contentWidth: this.options.contentWidth,
+      },
+    };
+  }
+}

src/i18n/en/index.ts

@@ -146,6 +146,12 @@ export default {
       Print: {
         tooltip: 'Print',
       },
+      Preview: {
+        tooltip: 'Preview',
+        dialog: {
+          title: 'Preview',
+        },
+      },
     },
   },
 };

src/i18n/pl/index.ts

@@ -146,6 +146,12 @@ export default {
       Print: {
         tooltip: 'Drukuj',
       },
+      Preview: {
+        tooltip: 'Podgląd',
+        dialog: {
+          title: 'Podgląd',
+        },
+      },
     },
   },
 };

src/i18n/zh/index.ts

@@ -146,6 +146,12 @@ export default {
       Print: {
         tooltip: '打印',
       },
+      Preview: {
+        tooltip: '预览',
+        dialog: {
+          title: '预览',
+        },
+      },
     },
   },
 };