feat: install plugin (lang, etc.)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-tiptap",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A modern WYSIWYG rich-text editor built on top of tiptap and Quasar for Vue.js",
   "productName": "Quasar Tiptap",
   "scripts": {

src/App.vue

@@ -5,13 +5,6 @@
 </template>
 
 <script>
-import Vue from 'vue'
-import { QuasarTiptapPlugin } from './index'
-
-Vue.use(QuasarTiptapPlugin, {
-  language: 'zh-hans',
-  spellcheck: true
-})
 
 export default {
   name: 'App'

src/components/QuasarTiptap.vue

@@ -79,7 +79,6 @@ import DynamicClass from 'src/extentions/dynamic'
 
 import OEditorMenuBar from 'src/components/menubars/OEditorMenuBar'
 import OEditorMenuBubble from 'src/components/menubars/OEditorMenuBubble'
-import Lang from 'src/lang'
 
 export default {
   name: 'quasar-tiptap',
@@ -244,15 +243,6 @@ export default {
     showSidePanel () {},
     onSlideShow () {}
   },
-  beforeCreate () {
-    if (!this.$o) {
-      let $o = {}
-      Lang.install($o, '')
-      Vue.prototype.$o = $o
-    } else {
-      console.log('Lang installed')
-    }
-  },
   mounted: function () {
     this.html = this.content
     this.initEditor()

src/index.js

@@ -1,28 +1,23 @@
-import Lang from 'src/lang'
+import Vue from 'vue'
+
+import install from 'src/install'
 import QuasarTiptap from 'src/components/QuasarTiptap'
 
-export const $o = {
-  config: {}
-}
+Vue.use({ install }, {})
 
 const QuasarTiptapPlugin = {
   installed: false,
   spellcheck: true,
 
-  install (Vue, options = {}) {
-    $o.config = Object.freeze(options)
-
-    this.spellcheck = options.spellcheck == null
+  install (Vue, opts = {}) {
+    this.spellcheck = opts.spellcheck == null
       ? true
-      : options.spellcheck
-
-    // required plugins
-    Lang.install($o, options.language)
+      : opts.spellcheck
+    Vue.prototype.$o.lang.set(opts.language)
 
     // quasar-tiptap
     Vue.component('quasar-tiptap', QuasarTiptap)
     Vue.prototype.$quasarTiptapPlugin = this
-    Vue.prototype.$o = $o
 
     this.installed = true
   },

src/install.js

@@ -0,0 +1,14 @@
+import Lang from 'src/lang'
+
+export const $o = {
+  config: {}
+}
+
+export default function (Vue, opts = {}) {
+  const cfg = $o.config = Object.freeze(opts.config || {})
+
+  // required plugins
+  Lang.install($o, opts.language)
+
+  Vue.prototype.$o = $o
+}

src/lang.js

@@ -10,10 +10,16 @@ export default {
       lang.set = this.set
       lang.getLocale = this.getLocale
 
-      Vue.util.defineReactive($o, 'lang', lang)
+      if ($o !== undefined && $o.lang !== undefined) {
+        $o.lang = lang
+      } else {
+        Vue.util.defineReactive($o, 'lang', lang)
+      }
+
       this.isoName = lang.isoName
       this.nativeName = lang.nativeName
       this.props = lang
+      console.log('install lang, $o', language, lang, $o)
     }
 
     this.set(language)
@@ -26,7 +32,6 @@ export default {
       navigator.userLanguage ||
       navigator.systemLanguage
 
-    console.log('lang', val)
     if (val) {
       return val.toLowerCase()
     }

src/pages/examples/all.vue

@@ -21,7 +21,13 @@
 </template>
 
 <script>
-import { QuasarTiptap, OMenubarBtn } from 'src/index'
+import Vue from 'vue'
+import { QuasarTiptapPlugin, OMenubarBtn } from 'src/index'
+Vue.use(QuasarTiptapPlugin, {
+  language: 'en-us',
+  spellcheck: true
+})
+
 import {
   Placeholder,
 } from 'tiptap-extensions'
@@ -87,13 +93,13 @@ export default {
     }
   },
   components: {
-    QuasarTiptap,
     OMenubarBtn,
   },
   methods: {
     onSlideShow () {}
   },
-  mounted: function () {
+  mounted () {
+    this.$o.lang.set('en-us')
   },
   deactivated () {
   },

src/pages/examples/basic.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import QuasarTiptap from 'src/components/QuasarTiptap'
+import { QuasarTiptap } from 'src/index'
 import {
   Placeholder,
 } from 'tiptap-extensions'
@@ -90,7 +90,8 @@ export default {
       console.log('html', this.html)
     }
   },
-  mounted: function () {
+  mounted () {
+    this.$o.lang.set('zh-hans')
   },
   deactivated () {
   },

src/pages/examples/readonly.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import QuasarTiptap from 'src/components/QuasarTiptap'
+import { QuasarTiptap } from 'src/index'
 
 import { BasicFeaturesArticle } from 'src/data/article'
 import { RecommendedExtensions } from 'src/extentions'