feat: ✨ event route

examples/router/index.js

@@ -2,8 +2,9 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 import Index from '../views/Index.vue';
 import Basic from '../views/Basic.vue';
-import Output from '../views/Output.vue';
 import MenuBubble from '../views/MenuBubble.vue';
+import Event from '../views/Event.vue';
+import Output from '../views/Output.vue';
 
 Vue.use(VueRouter);
 
@@ -17,16 +18,21 @@ const routes = [
         path: '/',
         component: Basic,
       },
-      {
-        name: 'Output',
-        path: '/output',
-        component: Output,
-      },
       {
         name: 'MenuBubble',
         path: '/menu_bubble',
         component: MenuBubble,
       },
+      {
+        name: 'Event',
+        path: '/event',
+        component: Event,
+      },
+      {
+        name: 'Output',
+        path: '/output',
+        component: Output,
+      },
     ],
   },
 ];

examples/views/Basic.vue

@@ -83,7 +83,7 @@ export default {
         </p>
         <p style="line-height: 100%;"></p>
         <p style="line-height: 100%;">
-          Text can decorated with <strong>Bold</strong>, <u>Underline</u>, <em>Italic</em>, <s>Strikethrough</s> or <strong><u><em><s>both</s></em></u></strong>.</p>
+          Text can be decorated with <strong>Bold</strong>, <u>Underline</u>, <em>Italic</em>, <s>Strikethrough</s> or <strong><u><em><s>both</s></em></u></strong>.</p>
           <p data-text-align="right" style="line-height: 100%;">
             Align text to right.
           </p>

examples/views/Event.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="el-tiptap-editor__wrapper">
+    <el-tiptap
+      :extensions="extensions"
+      :content="content"
+      placeholder="Write something ..."
+      @onInit="onInitEvent"
+      @onTransaction="onTransactionEvent"
+      @onFocus="onFocusEvent"
+      @onBlur="onBlurEvent"
+      @onPaste="onPasteEvent"
+      @onDrop="onDropEvent"
+      @onUpdate="onUpdateEvent"
+    />
+  </div>
+</template>
+
+<script>
+import {
+  ElTiptap,
+
+  Doc,
+  Text,
+  Paragraph,
+  Heading,
+  Bold,
+  Underline,
+  Italic,
+  Strike,
+  Blockquote,
+  CodeBlock,
+  ListItem,
+  BulletList,
+  OrderedList,
+  TodoItem,
+  TodoList,
+  TextAlign,
+  Indent,
+  History,
+} from 'el-tiptap';
+
+export default {
+  components: {
+    ElTiptap,
+  },
+
+  data () {
+    return {
+      extensions: [
+        new Doc(),
+        new Text(),
+        new Paragraph(),
+        new Heading({ level: 5 }),
+        new Bold(),
+        new Underline(),
+        new Italic(),
+        new Strike(),
+        new Blockquote(),
+        new CodeBlock(),
+        new TextAlign(),
+        new ListItem(),
+        new BulletList(),
+        new OrderedList(),
+        new TodoItem(),
+        new TodoList(),
+        new Indent(),
+        new History(),
+      ],
+
+      content: `
+        <h1>You can view editor Events in Console</h1>
+        <p><strong>Events: </strong></p>
+        <p data-indent="1"><strong>Init、 Transaction、 Focus、 Blur、 Paste、 Drop、 Update</strong></p>
+      `,
+    };
+  },
+
+  methods: {
+    onInitEvent ({ editor }) {
+      console.log('init', editor);
+    },
+
+    onTransactionEvent ({ editor }) {
+      console.log('transaction', editor);
+    },
+
+    onFocusEvent ({ editor }) {
+      console.log('focus', editor);
+    },
+
+    onBlurEvent ({ editor }) {
+      console.log('blur', editor);
+    },
+
+    onPasteEvent ({ editor }) {
+      console.log('paste', editor);
+    },
+
+    onDropEvent ({ editor }) {
+      console.log('drop', editor);
+    },
+
+    onUpdateEvent (output) {
+      console.log('update', output);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-tiptap-editor {
+  &__wrapper {
+    width: 60vw;
+  }
+}
+</style>

examples/views/Index.vue

@@ -35,6 +35,19 @@
           </span>
         </router-link>
 
+        <router-link
+          :to="{ name: 'Event' }"
+          v-slot="{ navigate, isActive }"
+        >
+          <span
+            :class="{ 'router-link--active': isActive }"
+            class="router-link"
+            @click="navigate"
+          >
+            Event
+          </span>
+        </router-link>
+
         <router-link
           :to="{ name: 'Output' }"
           v-slot="{ navigate, isActive }"

src/components/ElTiptap.vue

@@ -165,7 +165,7 @@ export default {
     },
 
     emitEvent (event) {
-      this.$emit(event, {
+      this.$emit(`on${capitalize(event)}`, {
         editor: this.editor,
       });
     },