From 44a521b06ef3f9cbe3956f37d6660e5d91cd517a Mon Sep 17 00:00:00 2001
From: Ilya <iliyazelenkog@gmail.com>
Date: Mon, 7 Oct 2019 02:28:47 +0300
Subject: [PATCH 1/5] fix(toolbar): correct wrap for toolbar elements and
 increase spacing for them

---
 src/components/Toolbar.vue                                     | 3 +++
 .../actions/renders/btn/ExtensionActionRenderBtn.vue           | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index a1cfada..fe92986 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -68,8 +68,11 @@ export default class Toolbar extends Vue {
   .tiptap-vuetify-editor__toolbar
     .v-toolbar
       display: flex
+      height: auto !important
+      padding: 5px
 
       .v-toolbar__content
         height: auto !important
         flex-wrap: wrap
+        padding: 0
 </style>
diff --git a/src/extensions/actions/renders/btn/ExtensionActionRenderBtn.vue b/src/extensions/actions/renders/btn/ExtensionActionRenderBtn.vue
index c3e1cb0..af2facf 100644
--- a/src/extensions/actions/renders/btn/ExtensionActionRenderBtn.vue
+++ b/src/extensions/actions/renders/btn/ExtensionActionRenderBtn.vue
@@ -88,7 +88,7 @@ export default class ExtensionActionRenderBtn extends Vue {
 
 <style lang="stylus">
 .tiptap-vuetify-editor__action-render-btn
-  margin: 0 6px
+  margin: 2px 6px
 
 .tiptap-vuetify-editor__btn-icon.v-icon.fas
   font-size: 16px

From f0786c6c9f8eff15dc454cf37025cd8a07fb5c3a Mon Sep 17 00:00:00 2001
From: Ilya <iliyazelenkog@gmail.com>
Date: Mon, 7 Oct 2019 03:23:21 +0300
Subject: [PATCH 2/5] feat(plugin): auto install (if user use via CDN)

---
 src/main.ts | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/main.ts b/src/main.ts
index 6e7f15b..5785cc5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -36,3 +36,23 @@ export const TiptapVuetifyPlugin = new (class Plugin implements PluginInterface<
     this.installed = true
   }
 })()
+
+// авто установка (полезно если ставится через CDN)
+;(function autoInstall () {
+  let globalScope: any = null
+
+  if (typeof window !== 'undefined') {
+    globalScope = window
+  } else if (typeof global !== 'undefined') {
+    // @ts-ignore
+    globalScope = global
+  }
+  if (globalScope && globalScope.Vue) {
+    // Automatic installation if Vue has been added to the global scope.
+    globalScope.Vue.use(TiptapVuetifyPlugin, {
+      vuetify: globalScope.vuetify,
+      ...globalScope.tiptapVuetifyPluginOptions
+    })
+    globalScope.Vue.component('tiptap-vuetify', TiptapVuetify)
+  }
+})()

From 547143078e855092dae619e1aa566216c3f0c198 Mon Sep 17 00:00:00 2001
From: Ilya <iliyazelenkog@gmail.com>
Date: Mon, 7 Oct 2019 03:25:12 +0300
Subject: [PATCH 3/5] docs: get started, where docs and examples for 1.x
 version, update features

---
 README.md | 96 ++++++++++++++++++++++++++++++-------------------------
 1 file changed, 52 insertions(+), 44 deletions(-)

diff --git a/README.md b/README.md
index 628893c..986480e 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
-**At the moment, this package does not fully support Vuetify 2, but it is planned soon. If you want me to work more on this project, you can give me motivation in the form of a star. Thanks for attention!**
-  
+If you have Vuetify `1.x` (not `2.x`), then you can find docs and demo [here](https://codesandbox.io/s/p2wnzxyo90?fontsize=14&module=%2Fsrc%2Fexamples%2FSimple.vue).
+
   <p align="center">
     <a href="https://www.npmjs.com/package/tiptap-vuetify">
       <img src="https://img.shields.io/npm/v/tiptap-vuetify.svg" alt="Version">
@@ -22,15 +22,18 @@
     <a href="https://www.npmjs.com/package/tiptap-vuetify">
       <img alt="codebeat badge" src="https://img.shields.io/badge/size-6.58%20kB-44cc11.svg" />
     </a>
+    <a href="https://www.npmjs.com/package/vue-cool-select" rel="noopener noreferrer" target="_blank">
+      <img src="https://img.shields.io/npm/dt/vue-cool-select?color=red&label=total%20downloads" alt="Downloads">
+    </a>
   </p>
 
 WYSIWYG editor for Vuetify. Component simplifies integration [tiptap](https://github.com/scrumpy/tiptap) with [vuetify](https://github.com/vuetifyjs/vuetify).
 
-[DEMO on codesanbox](https://codesandbox.io/s/p2wnzxyo90?fontsize=14&module=%2Fsrc%2Fexamples%2FSimple.vue)
+[DEMO on codesanbox](https://codesandbox.io/s/vue-template-6p9wp?fontsize=14&module=%2Fsrc%2Fexamples%2FSimple.vue)
 
 [
 ![](https://i.imgur.com/vfKWfkv.png)
-](https://codesandbox.io/s/p2wnzxyo90?fontsize=14&module=%2Fsrc%2Fexamples%2FSimple.vue)
+](https://codesandbox.io/s/vue-template-6p9wp?fontsize=14&module=%2Fsrc%2Fexamples%2FSimple.vue)
 
 
 ## Navigation
@@ -59,6 +62,7 @@ WYSIWYG editor for Vuetify. Component simplifies integration [tiptap](https://gi
 - the project is ready to actively develop if there is support (stars)!
 - the ability to create and use your own extensions
 - choose where the extension buttons should be displayed: in the toolbar or in the bubble menu
+- Vuetify `2.x` and `1.x` support
 
 ## Installation
 
@@ -71,18 +75,28 @@ npm install --save tiptap-vuetify
 
 ## Get started
 
-1) Add `Vue.use` for plugin. You can select your icons group (`iconsGroup`, `'md'` by default).
+1) Installing the package and Vuetify 2 from scratch:
 
 ```js
 import Vue from 'vue'
+import Vuetify from 'vuetify'
+// import plugin
 import { TiptapVuetifyPlugin } from 'tiptap-vuetify'
-// don't forget to import styles
+// don't forget to import CSS styles
 import 'tiptap-vuetify/dist/main.css'
+// Vuetify's CSS styles 
+import 'vuetify/dist/vuetify.min.css'
+
 
-// first it
+// Vuetify Object (as described in the Vuetify 2 documentation)
+const vuetify = new Vuetify()
+
+// use Vuetify's plugin
 Vue.use(Vuetify)
-// AFTER Vue.use(Vuetify) !!!
+// use this package's plugin
 Vue.use(TiptapVuetifyPlugin, {
+  // the next line is important! You need to provide the Vuetify Object to this place.
+  vuetify, // same as "vuetify: vuetify"
   // optional, default to 'md' (default vuetify icons before v2.0.0)
   iconsGroup: 'md'
 })
@@ -95,56 +109,46 @@ More about vuetify icons you can read [here](https://vuetifyjs.com/en/components
 ```vue
 <template>
   <div>
-    <!--Use the component in the right place of the template-->
+    <!-- Use the component in the right place of the template -->
     <tiptap-vuetify
       v-model="content"
       :extensions="extensions"
     />
-
-    <!--Here's how to make a preview (optional)-->
-    <h1>Preview</h1>
-    <hr>
-
-    <div
-      class="tiptap-vuetify-editor__content"
-      v-html="content"
-    />
   </div>
 </template>
 
 <script>
 // import the component and the necessary extensions
-import { TiptapVuetify, Heading, Bold, Italic, Strike, Underline, Code, CodeBlock, Paragraph, BulletList, OrderedList,
-  ListItem, Link, Blockquote, HardBreak, HorizontalRule, History
-} from 'tiptap-vuetify'
-import { TiptapVuetifyPlugin } from 'tiptap-vuetify'
+import { TiptapVuetify, Heading, Bold, Italic, Strike, Underline, Code, Paragraph, BulletList, OrderedList, ListItem, Link, Blockquote, HardBreak, HorizontalRule, History } from 'tiptap-vuetify'
+
 export default {
-  // specify in the list of components
+  // specify TiptapVuetify component in "components"
   components: { TiptapVuetify },
   data: () => ({
     // declare extensions you want to use
     extensions: [
-      // you can specify options for extension
-      new Heading({
-        levels: [1, 2, 3]
-      }),
-      new Bold(),
-      new Italic(),
-      new Strike(),
-      new Underline(),
-      new Code(),
-      new CodeBlock(),
-      new Paragraph(),
-      new BulletList(),
-      new OrderedList(),
-      new ListItem(),
-      new Link(),
-      new Blockquote(),
-      new HardBreak(),
-      new HorizontalRule(),
-      new History()
+      History,
+      Blockquote,
+      Link,
+      Underline,
+      Strike,
+      Italic,
+      ListItem,
+      BulletList,
+      OrderedList,
+      [Heading, {
+        options: {
+          levels: [1, 2, 3]
+        }
+      }],
+      Bold,
+      Link,
+      Code,
+      HorizontalRule,
+      Paragraph,
+      HardBreak
     ],
-    // starting content for the editor
+    // starting editor's content
     content: `
       <h1>Yay Headlines!</h1>
       <p>All these <strong>cool tags</strong> are working now.</p>
@@ -166,6 +170,10 @@ Or
 <script src="https://cdn.jsdelivr.net/npm/tiptap-vuetify"></script>
 ```
 
+The plugin should be installed automatically after connecting the script.
+The only thing is that the Vuetify object must be set in `window.vuetify` so that the plugin gets access to it.
+Write if you have questions.
+
 ## Props
 
 ### placeholder
@@ -353,6 +361,6 @@ In the future version this problem will most likely be solved and you will not n
 ## TODO
 
 - images uploading (free hosting by default) [Relevant issue.](https://github.com/iliyaZelenko/tiptap-vuetify/issues/16)
-- site with docs and examples
+- site with full-docs and examples
 - emoticons
 - tests

From 706f687b1f4408329346259dfacd138ad9ad39c6 Mon Sep 17 00:00:00 2001
From: Ilya <iliyazelenkog@gmail.com>
Date: Mon, 7 Oct 2019 03:34:46 +0300
Subject: [PATCH 4/5] docs(readme): small improvements

---
 README.md | 35 ++---------------------------------
 1 file changed, 2 insertions(+), 33 deletions(-)

diff --git a/README.md b/README.md
index 986480e..0f58613 100644
--- a/README.md
+++ b/README.md
@@ -22,9 +22,6 @@ If you have Vuetify `1.x` (not `2.x`), then you can find docs and demo [here](ht
     <a href="https://www.npmjs.com/package/tiptap-vuetify">
       <img alt="codebeat badge" src="https://img.shields.io/badge/size-6.58%20kB-44cc11.svg" />
     </a>
-    <a href="https://www.npmjs.com/package/vue-cool-select" rel="noopener noreferrer" target="_blank">
-      <img src="https://img.shields.io/npm/dt/vue-cool-select?color=red&label=total%20downloads" alt="Downloads">
-    </a>
   </p>
 
 WYSIWYG editor for Vuetify. Component simplifies integration [tiptap](https://github.com/scrumpy/tiptap) with [vuetify](https://github.com/vuetifyjs/vuetify).
@@ -32,7 +29,7 @@ WYSIWYG editor for Vuetify. Component simplifies integration [tiptap](https://gi
 [DEMO on codesanbox](https://codesandbox.io/s/vue-template-6p9wp?fontsize=14&module=%2Fsrc%2Fexamples%2FSimple.vue)
 
 [
-![](https://i.imgur.com/vfKWfkv.png)
+![](https://d1sz9tkli0lfjq.cloudfront.net/items/0s2E3A433x1A2b1l3q24/Image%202019-10-07%20at%203.30.03%20AM.png)
 ](https://codesandbox.io/s/vue-template-6p9wp?fontsize=14&module=%2Fsrc%2Fexamples%2FSimple.vue)
 
 
@@ -329,38 +326,10 @@ You can add content before the toolbar.
 
 You can add content after the toolbar.
 
-## Frequent issues
-
-### A La Carte / VuetifyLoaderPlugin
-
-You may receive an error like this:
-
-```
-[Vue warn]:  Unknown custom element: <v-card> - did you register 
-the component correctly? For recursive components, 
-make sure to provide the "name" option.
-```
-
-To solve it, specify for Vuetify that you want to use components that this package uses: 
-
-```
-Vue.use(Vuetify, {
-  components: {
-    VTextField,
-    VTooltip,
-    VToolbar,
-    VCard,
-    VIcon,
-    VBtn,
-  }
-});
-```
-
-In the future version this problem will most likely be solved and you will not need to do anything.
-
 ## TODO
 
 - images uploading (free hosting by default) [Relevant issue.](https://github.com/iliyaZelenko/tiptap-vuetify/issues/16)
 - site with full-docs and examples
 - emoticons
 - tests
+- support for more extensions

From 83138a3a3468e753e88e3d258e4c3cc076fd7ef0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=98=D0=BB=D1=8C=D1=8F?= <iliyazelenkog@gmail.com>
Date: Mon, 7 Oct 2019 03:35:35 +0300
Subject: [PATCH 5/5] Update README.md

---
 README.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/README.md b/README.md
index 0f58613..8953253 100644
--- a/README.md
+++ b/README.md
@@ -43,7 +43,6 @@ WYSIWYG editor for Vuetify. Component simplifies integration [tiptap](https://gi
 - [Props](#props)
 - [Events](#events)
 - [Slots](#slots)
-- [Frequent issues](#frequent-issues)
 - [TODO](#todo)
 
 <!-- /TOC -->