Merge pull request #51 from iliyaZelenko/master

Next Release

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">
@@ -26,11 +26,11 @@
 
 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://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)
 
 
 ## Navigation
@@ -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 -->
@@ -59,6 +58,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 +71,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'
+
+
+// Vuetify Object (as described in the Vuetify 2 documentation)
+const vuetify = new Vuetify()
 
-// first it
+// 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 +105,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 +166,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
@@ -321,38 +325,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 docs and examples
+- site with full-docs and examples
 - emoticons
 - tests
+- support for more extensions

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>

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

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)
+  }
+})()