@zeedhi/zd-richtext-vue 1.4.3 → 1.5.0

package/README.md

@@ -1,74 +1,74 @@
-# Componente Rich Text para Zeedhi
-O componente de Rich Text é um editor de texto enriquecido com algumas funcionalidades.
-
-![Alt Text](https://i.ibb.co/wCyr6jC/zd-rich-text.png)
-
-## Instalação
-<code>npm i @zeedhi/zd-richtext</code>
-Com isso, dois pacotes serão instalados: o **@zeedhi/zd-richtext-common** e o **@zeedhi/zd-richtext-vue**.
-
-Após a instalação, é necessário que você você importe o pacote **@zeedhi/zd-richtext-vue** dentro de seu arquivo de configuração <code>zeedhi.ts</code>
-```ts
-import { ZdRichText } from '@zeedhi/zd-richtext';
-
-Vue.component('ZdRichText', ZdRichText);
-```
-
-Já o pacote **@zeedhi/zd-rich-text-common** deve ser importado no arquivo <code>controller</code> do componente.
-
-## Uso Básico
-Para usar, defina a propriedade <code>component</code> como 'ZdRichText'.
-
-```json
-{
-  "name": "rich-text-example",
-  "component": "ZdRichText"
-}
-```
-
-## Propriedades
-
-### outputFormat
-<p>Tipo: <code>string</code></p>
-<p>Default: <code>json</code></p>
-<p>Descrição: Define o formato de saída do conteúdo digitado ('json' ou 'html')</p>
-
-### placeholder
-<p>Tipo: <code>string</code></p>
-<p>Default: <code>''</code></p>
-<p>Descrição: Texto mostrado enquanto o editor estiver sem conteúdo</p>
-
-### disabled
-<p>Tipo: <code>boolean</code></p>
-<p>Default: <code>false</code></p>
-<p>Descrição: Desabilita o componente</p>
-
-### toolbarColor
-<p>Tipo: <code>string</code></p>
-<p>Default: <code>'#772583'</code></p>
-<p>Descrição: Define a cor da barra de tarefas</p>
-
-### cardColor
-<p>Tipo: <code>string</code></p>
-<p>Default: <code>''</code></p>
-<p>Descrição: Define a cor do cartão de entrada de texto</p>
-
-### outlined
-<p>Tipo: <code>boolean</code></p>
-<p>Default: <code>false</code></p>
-<p>Descrição: Remove a elevação e adiciona uma borda fina ao cartão de entrada de texto</p>
-
-### width
-<p>Tipo: <code>number | string</code></p>
-<p>Default: <code>''</code></p>
-<p>Descrição: Define a largura do componente</p>
-
-### height
-<p>Tipo: <code>number | string</code></p>
-<p>Default: <code>''</code></p>
-<p>Descrição: Define a altura do componente</p>
-
-## Eventos
-<p>Nome: <code>onKeyDown</code></p>
-<p><code>{ element, component, key, content }: IEventParam</code></p>
-<p>Descrição: Disparado quando uma tecla é digitada no editor</p>
+# Componente Rich Text para Zeedhi
+O componente de Rich Text é um editor de texto enriquecido com algumas funcionalidades.
+
+![Alt Text](https://i.ibb.co/wCyr6jC/zd-rich-text.png)
+
+## Instalação
+<code>npm i @zeedhi/zd-richtext</code>
+Com isso, dois pacotes serão instalados: o **@zeedhi/zd-richtext-common** e o **@zeedhi/zd-richtext-vue**.
+
+Após a instalação, é necessário que você você importe o pacote **@zeedhi/zd-richtext-vue** dentro de seu arquivo de configuração <code>zeedhi.ts</code>
+```ts
+import { ZdRichText } from '@zeedhi/zd-richtext';
+
+Vue.component('ZdRichText', ZdRichText);
+```
+
+Já o pacote **@zeedhi/zd-rich-text-common** deve ser importado no arquivo <code>controller</code> do componente.
+
+## Uso Básico
+Para usar, defina a propriedade <code>component</code> como 'ZdRichText'.
+
+```json
+{
+  "name": "rich-text-example",
+  "component": "ZdRichText"
+}
+```
+
+## Propriedades
+
+### outputFormat
+<p>Tipo: <code>string</code></p>
+<p>Default: <code>json</code></p>
+<p>Descrição: Define o formato de saída do conteúdo digitado ('json' ou 'html')</p>
+
+### placeholder
+<p>Tipo: <code>string</code></p>
+<p>Default: <code>''</code></p>
+<p>Descrição: Texto mostrado enquanto o editor estiver sem conteúdo</p>
+
+### disabled
+<p>Tipo: <code>boolean</code></p>
+<p>Default: <code>false</code></p>
+<p>Descrição: Desabilita o componente</p>
+
+### toolbarColor
+<p>Tipo: <code>string</code></p>
+<p>Default: <code>'#772583'</code></p>
+<p>Descrição: Define a cor da barra de tarefas</p>
+
+### cardColor
+<p>Tipo: <code>string</code></p>
+<p>Default: <code>''</code></p>
+<p>Descrição: Define a cor do cartão de entrada de texto</p>
+
+### outlined
+<p>Tipo: <code>boolean</code></p>
+<p>Default: <code>false</code></p>
+<p>Descrição: Remove a elevação e adiciona uma borda fina ao cartão de entrada de texto</p>
+
+### width
+<p>Tipo: <code>number | string</code></p>
+<p>Default: <code>''</code></p>
+<p>Descrição: Define a largura do componente</p>
+
+### height
+<p>Tipo: <code>number | string</code></p>
+<p>Default: <code>''</code></p>
+<p>Descrição: Define a altura do componente</p>
+
+## Eventos
+<p>Nome: <code>onKeyDown</code></p>
+<p><code>{ element, component, key, content }: IEventParam</code></p>
+<p>Descrição: Disparado quando uma tecla é digitada no editor</p>

package/dist/rich-text-vue.esm.js

@@ -1,9 +1,9 @@
 import { I18n, VersionService } from '@zeedhi/core';
 import { PropWatch, ZdComponentRender, setFillHeight, Vuetify } from '@zeedhi/vuetify';
+import { locale, createVuetifyProTipTap, VuetifyTiptap } from '@zeedhi/zd-vuetify-pro-tiptap';
+import '@zeedhi/zd-vuetify-pro-tiptap/lib/style.css';
 import Vue, { ref } from 'vue';
-import { locale, createVuetifyProTipTap, VuetifyTiptap } from 'vuetify-pro-tiptap';
-import 'vuetify-pro-tiptap/lib/style.css';
-import { FontFamily as FontFamily$1 } from '@tiptap/extension-font-family';
+import { FontFamily as FontFamily$2 } from '@tiptap/extension-font-family';
 import { EditorContent } from '@tiptap/vue-2';
 import { RichText } from '@zeedhi/zd-richtext-common';
 import { Watch, Component as Component$1 } from 'vue-property-decorator';
@@ -35,13 +35,13 @@ function __metadata(metadataKey, metadataValue) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
 }
 
-const fonts = [
+const fonts$1 = [
     { font: 'Inter', title: 'Inter' },
     { font: 'Roboto', title: 'Roboto' },
     { font: 'serif', title: 'Serif' },
     { font: 'monospace', title: 'Monospace' },
 ];
-let FontFamily = class FontFamily extends ZdComponentRender {
+let FontFamily$1 = class FontFamily extends ZdComponentRender {
     setFontStyle(editor, font) {
         editor.chain().focus().setFontFamily(font).run();
     }
@@ -49,26 +49,31 @@ let FontFamily = class FontFamily extends ZdComponentRender {
 __decorate([
     PropWatch({ type: Object, default: '' }),
     __metadata("design:type", Object)
-], FontFamily.prototype, "editor", void 0);
+], FontFamily$1.prototype, "editor", void 0);
 __decorate([
     PropWatch({ type: Object, default: '' }),
     __metadata("design:type", Object)
-], FontFamily.prototype, "attrs", void 0);
+], FontFamily$1.prototype, "attrs", void 0);
 __decorate([
-    PropWatch({ type: Array, default: () => (fonts) }),
+    PropWatch({ type: Array, default: () => (fonts$1) }),
     __metadata("design:type", Array)
-], FontFamily.prototype, "fonts", void 0);
-FontFamily = __decorate([
+], FontFamily$1.prototype, "fonts", void 0);
+FontFamily$1 = __decorate([
     Component
-], FontFamily);
-var script$1 = FontFamily;
+], FontFamily$1);
+
+let installed = false;
+const setInstalled = () => {
+    installed = true;
+};
+const getInstalled = () => installed;
 
 let ZdRichText = class ZdRichText extends ZdComponentRender {
     constructor() {
         super(...arguments);
         this.instanceType = RichText;
         this.isMounted = false;
-        this.extensions = [FontFamily$1];
+        this.extensions = [FontFamily$2];
         this.toolbar = ref([
             'bold',
             'italic',
@@ -97,7 +102,7 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
             // "outdent",
             '|',
             // "link",
-            // "image",
+            'image',
             // "video",
             // "table",
             // "blockquote",
@@ -141,6 +146,12 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
             this.instance.onChange(this.instance.content);
         }
     }
+    created() {
+        if (!getInstalled()) {
+            console.error('[ZdRichText]: A partir da versão 1.5.0 o componente ZdRichText deve ser instalado'
+                + ' usando o Vue.use() ao invés do Vue.component(). Veja a documentação para mais detalhes.');
+        }
+    }
     mounted() {
         var _a;
         if (this.$refs.tiptap.editor) {
@@ -210,7 +221,7 @@ __decorate([
     __metadata("design:type", String)
 ], ZdRichText.prototype, "cardColor", void 0);
 __decorate([
-    PropWatch({ type: Array, default: () => (fonts) }),
+    PropWatch({ type: Array, default: () => (fonts$1) }),
     __metadata("design:type", Array)
 ], ZdRichText.prototype, "fonts", void 0);
 __decorate([
@@ -266,7 +277,7 @@ ZdRichText = __decorate([
         components: { EditorContent },
     })
 ], ZdRichText);
-var script = ZdRichText;
+var script$1 = ZdRichText;
 
 function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
     if (typeof shadowMode !== 'boolean') {
@@ -397,7 +408,7 @@ function addStyle(id, css) {
 }
 
 /* script */
-const __vue_script__$1 = script;
+const __vue_script__$1 = script$1;
 
 /* template */
 var __vue_render__$1 = function () {
@@ -504,7 +515,7 @@ __vue_render__$1._withStripped = true;
   /* style */
   const __vue_inject_styles__$1 = function (inject) {
     if (!inject) return
-    inject("data-v-45ed460e_0", { source: ".zd-rich-text #tippy-1 {\n  display: none;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor.v-card.v-card--flat.v-sheet.theme--light.rounded {\n  background-color: #ffffff !important;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor.v-card.v-card--flat.v-sheet.theme--dark.rounded {\n  background-color: #383838 !important;\n}\n.zd-rich-text .zd-rich-text--disabled .vuetify-pro-tiptap-editor__toolbar {\n  pointer-events: none;\n  opacity: 0.5;\n}\n.zd-rich-text .zd-rich-text--readonly {\n  width: 741px;\n}\n.zd-rich-text .v-toolbar__content button.v-btn {\n  color: #ffffff !important;\n}", map: undefined, media: undefined });
+    inject("data-v-90d68d34_0", { source: ".zd-rich-text #tippy-1 {\n  display: none;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor.v-card.v-card--flat.v-sheet.theme--light.rounded {\n  background-color: #ffffff !important;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor.v-card.v-card--flat.v-sheet.theme--dark.rounded {\n  background-color: #383838 !important;\n}\n.zd-rich-text .zd-rich-text--disabled .vuetify-pro-tiptap-editor__toolbar {\n  pointer-events: none;\n  opacity: 0.5;\n}\n.zd-rich-text .zd-rich-text--readonly {\n  width: 741px;\n}\n.zd-rich-text .v-toolbar__content button.v-btn {\n  color: #ffffff !important;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -532,8 +543,36 @@ __vue_render__$1._withStripped = true;
     undefined
   );
 
+const fonts = [
+    { font: 'Inter', title: 'Inter' },
+    { font: 'Roboto', title: 'Roboto' },
+    { font: 'serif', title: 'Serif' },
+    { font: 'monospace', title: 'Monospace' },
+];
+let FontFamily = class FontFamily extends ZdComponentRender {
+    setFontStyle(editor, font) {
+        editor.chain().focus().setFontFamily(font).run();
+    }
+};
+__decorate([
+    PropWatch({ type: Object, default: '' }),
+    __metadata("design:type", Object)
+], FontFamily.prototype, "editor", void 0);
+__decorate([
+    PropWatch({ type: Object, default: '' }),
+    __metadata("design:type", Object)
+], FontFamily.prototype, "attrs", void 0);
+__decorate([
+    PropWatch({ type: Array, default: () => (fonts) }),
+    __metadata("design:type", Array)
+], FontFamily.prototype, "fonts", void 0);
+FontFamily = __decorate([
+    Component
+], FontFamily);
+var script = FontFamily;
+
 /* script */
-const __vue_script__ = script$1;
+const __vue_script__ = script;
 
 /* template */
 var __vue_render__ = function () {
@@ -661,15 +700,27 @@ __vue_render__._withStripped = true;
     undefined
   );
 
-const vuetify = new Vuetify();
-const VuetifyProTipTap = createVuetifyProTipTap({
-    vuetify,
-    components: {
-        VuetifyTiptap,
-        FontFamily: __vue_component__,
-    },
-});
-Vue.use(VuetifyProTipTap);
+/**
+ * Function called when uploading an image to the editor
+ * it will read the file and return a base64 string
+ */
+function upload(file) {
+    return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onload = (event) => {
+            var _a;
+            if (typeof ((_a = event.target) === null || _a === void 0 ? void 0 : _a.result) === 'string') {
+                resolve(event.target.result);
+            }
+            else {
+                resolve('');
+            }
+        };
+        reader.onerror = () => resolve('');
+        reader.readAsDataURL(file);
+    });
+}
+
 const packageContent = require('../package.json');
 VersionService.addPackageVersion(packageContent.name, packageContent.version);
 locale.setMessage('pt', {
@@ -813,6 +864,38 @@ locale.setMessage('es', {
     'editor.redo.tooltip': 'Rehacer',
     'editor.fullscreen.tooltip.fullscreen': 'Pantalla completa',
     'editor.fullscreen.tooltip.exit': 'Salir de pantalla completa',
-});
+});
+// install VuetifyProTipTap creating a new vuetify instance
+// in case the user installs RichText using Vue.component()
+const vuetify = new Vuetify();
+const VuetifyProTipTap = createVuetifyProTipTap({
+    vuetify,
+    components: {
+        VuetifyTiptap,
+        FontFamily: __vue_component__,
+    },
+});
+Vue.use(VuetifyProTipTap);
+// in case the user installs RichText using Vue.use()
+// should install VuetifyProTipTap using the already existing vuetify instance
+const RichTextPlugin = {
+    install(AppVue, options) {
+        setInstalled();
+        const ConfiguredTiptap = createVuetifyProTipTap({
+            vuetify: options.vuetify,
+            components: {
+                VuetifyTiptap,
+                FontFamily: __vue_component__,
+            },
+            config: {
+                image: {
+                    upload,
+                },
+            },
+        });
+        AppVue.use(ConfiguredTiptap);
+        AppVue.component('ZdRichText', __vue_component__$1);
+    },
+};
 
-export { __vue_component__$1 as ZdRichText };
+export { RichTextPlugin, __vue_component__$1 as ZdRichText };

package/dist/rich-text-vue.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/core'), require('@zeedhi/vuetify'), require('vue'), require('vuetify-pro-tiptap'), require('vuetify-pro-tiptap/lib/style.css'), require('@tiptap/extension-font-family'), require('@tiptap/vue-2'), require('@zeedhi/zd-richtext-common'), require('vue-property-decorator'), require('vue-class-component')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/core', '@zeedhi/vuetify', 'vue', 'vuetify-pro-tiptap', 'vuetify-pro-tiptap/lib/style.css', '@tiptap/extension-font-family', '@tiptap/vue-2', '@zeedhi/zd-richtext-common', 'vue-property-decorator', 'vue-class-component'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/zd-richtext-vue"] = {}, global.core, global["@zeedhi/vuetify"], global.vue, global["vuetify-pro-tiptap"], null, global["@tiptap/extension-font-family"], global["@tiptap/vue-2"], global["@zeedhi/zd-richtext-common"], global["vue-property-decorator"], global["vue-class-component"]));
-})(this, (function (exports, core, vuetify$1, Vue, vuetifyProTiptap, style_css, extensionFontFamily, vue2, zdRichtextCommon, vuePropertyDecorator, Component) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/core'), require('@zeedhi/vuetify'), require('@zeedhi/zd-vuetify-pro-tiptap'), require('@zeedhi/zd-vuetify-pro-tiptap/lib/style.css'), require('vue'), require('@tiptap/extension-font-family'), require('@tiptap/vue-2'), require('@zeedhi/zd-richtext-common'), require('vue-property-decorator'), require('vue-class-component')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/core', '@zeedhi/vuetify', '@zeedhi/zd-vuetify-pro-tiptap', '@zeedhi/zd-vuetify-pro-tiptap/lib/style.css', 'vue', '@tiptap/extension-font-family', '@tiptap/vue-2', '@zeedhi/zd-richtext-common', 'vue-property-decorator', 'vue-class-component'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/zd-richtext-vue"] = {}, global.core, global["@zeedhi/vuetify"], global["@zeedhi/zd-vuetify-pro-tiptap"], null, global.vue, global["@tiptap/extension-font-family"], global["@tiptap/vue-2"], global["@zeedhi/zd-richtext-common"], global["vue-property-decorator"], global["vue-class-component"]));
+})(this, (function (exports, core, vuetify$1, zdVuetifyProTiptap, style_css, Vue, extensionFontFamily, vue2, zdRichtextCommon, vuePropertyDecorator, Component) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -35,13 +35,13 @@
         if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
     }
 
-    const fonts = [
+    const fonts$1 = [
         { font: 'Inter', title: 'Inter' },
         { font: 'Roboto', title: 'Roboto' },
         { font: 'serif', title: 'Serif' },
         { font: 'monospace', title: 'Monospace' },
     ];
-    let FontFamily = class FontFamily extends vuetify$1.ZdComponentRender {
+    let FontFamily$1 = class FontFamily extends vuetify$1.ZdComponentRender {
         setFontStyle(editor, font) {
             editor.chain().focus().setFontFamily(font).run();
         }
@@ -49,19 +49,24 @@
     __decorate([
         vuetify$1.PropWatch({ type: Object, default: '' }),
         __metadata("design:type", Object)
-    ], FontFamily.prototype, "editor", void 0);
+    ], FontFamily$1.prototype, "editor", void 0);
     __decorate([
         vuetify$1.PropWatch({ type: Object, default: '' }),
         __metadata("design:type", Object)
-    ], FontFamily.prototype, "attrs", void 0);
+    ], FontFamily$1.prototype, "attrs", void 0);
     __decorate([
-        vuetify$1.PropWatch({ type: Array, default: () => (fonts) }),
+        vuetify$1.PropWatch({ type: Array, default: () => (fonts$1) }),
         __metadata("design:type", Array)
-    ], FontFamily.prototype, "fonts", void 0);
-    FontFamily = __decorate([
+    ], FontFamily$1.prototype, "fonts", void 0);
+    FontFamily$1 = __decorate([
         Component__default["default"]
-    ], FontFamily);
-    var script$1 = FontFamily;
+    ], FontFamily$1);
+
+    let installed = false;
+    const setInstalled = () => {
+        installed = true;
+    };
+    const getInstalled = () => installed;
 
     let ZdRichText = class ZdRichText extends vuetify$1.ZdComponentRender {
         constructor() {
@@ -97,7 +102,7 @@
                 // "outdent",
                 '|',
                 // "link",
-                // "image",
+                'image',
                 // "video",
                 // "table",
                 // "blockquote",
@@ -121,7 +126,7 @@
         }
         changeLanguage() {
             const newLanguage = core.I18n.instance.language.split('-')[0];
-            vuetifyProTiptap.locale.setLang(newLanguage);
+            zdVuetifyProTiptap.locale.setLang(newLanguage);
         }
         hasClass() {
             return this.isMounted && this.$el.classList.contains('zd-form-child');
@@ -141,6 +146,12 @@
                 this.instance.onChange(this.instance.content);
             }
         }
+        created() {
+            if (!getInstalled()) {
+                console.error('[ZdRichText]: A partir da versão 1.5.0 o componente ZdRichText deve ser instalado'
+                    + ' usando o Vue.use() ao invés do Vue.component(). Veja a documentação para mais detalhes.');
+            }
+        }
         mounted() {
             var _a;
             if (this.$refs.tiptap.editor) {
@@ -210,7 +221,7 @@
         __metadata("design:type", String)
     ], ZdRichText.prototype, "cardColor", void 0);
     __decorate([
-        vuetify$1.PropWatch({ type: Array, default: () => (fonts) }),
+        vuetify$1.PropWatch({ type: Array, default: () => (fonts$1) }),
         __metadata("design:type", Array)
     ], ZdRichText.prototype, "fonts", void 0);
     __decorate([
@@ -266,7 +277,7 @@
             components: { EditorContent: vue2.EditorContent },
         })
     ], ZdRichText);
-    var script = ZdRichText;
+    var script$1 = ZdRichText;
 
     function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
         if (typeof shadowMode !== 'boolean') {
@@ -397,7 +408,7 @@
     }
 
     /* script */
-    const __vue_script__$1 = script;
+    const __vue_script__$1 = script$1;
 
     /* template */
     var __vue_render__$1 = function () {
@@ -504,7 +515,7 @@
       /* style */
       const __vue_inject_styles__$1 = function (inject) {
         if (!inject) return
-        inject("data-v-45ed460e_0", { source: ".zd-rich-text #tippy-1 {\n  display: none;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor.v-card.v-card--flat.v-sheet.theme--light.rounded {\n  background-color: #ffffff !important;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor.v-card.v-card--flat.v-sheet.theme--dark.rounded {\n  background-color: #383838 !important;\n}\n.zd-rich-text .zd-rich-text--disabled .vuetify-pro-tiptap-editor__toolbar {\n  pointer-events: none;\n  opacity: 0.5;\n}\n.zd-rich-text .zd-rich-text--readonly {\n  width: 741px;\n}\n.zd-rich-text .v-toolbar__content button.v-btn {\n  color: #ffffff !important;\n}", map: undefined, media: undefined });
+        inject("data-v-90d68d34_0", { source: ".zd-rich-text #tippy-1 {\n  display: none;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor.v-card.v-card--flat.v-sheet.theme--light.rounded {\n  background-color: #ffffff !important;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor.v-card.v-card--flat.v-sheet.theme--dark.rounded {\n  background-color: #383838 !important;\n}\n.zd-rich-text .zd-rich-text--disabled .vuetify-pro-tiptap-editor__toolbar {\n  pointer-events: none;\n  opacity: 0.5;\n}\n.zd-rich-text .zd-rich-text--readonly {\n  width: 741px;\n}\n.zd-rich-text .v-toolbar__content button.v-btn {\n  color: #ffffff !important;\n}", map: undefined, media: undefined });
 
       };
       /* scoped */
@@ -532,8 +543,36 @@
         undefined
       );
 
+    const fonts = [
+        { font: 'Inter', title: 'Inter' },
+        { font: 'Roboto', title: 'Roboto' },
+        { font: 'serif', title: 'Serif' },
+        { font: 'monospace', title: 'Monospace' },
+    ];
+    let FontFamily = class FontFamily extends vuetify$1.ZdComponentRender {
+        setFontStyle(editor, font) {
+            editor.chain().focus().setFontFamily(font).run();
+        }
+    };
+    __decorate([
+        vuetify$1.PropWatch({ type: Object, default: '' }),
+        __metadata("design:type", Object)
+    ], FontFamily.prototype, "editor", void 0);
+    __decorate([
+        vuetify$1.PropWatch({ type: Object, default: '' }),
+        __metadata("design:type", Object)
+    ], FontFamily.prototype, "attrs", void 0);
+    __decorate([
+        vuetify$1.PropWatch({ type: Array, default: () => (fonts) }),
+        __metadata("design:type", Array)
+    ], FontFamily.prototype, "fonts", void 0);
+    FontFamily = __decorate([
+        Component__default["default"]
+    ], FontFamily);
+    var script = FontFamily;
+
     /* script */
-    const __vue_script__ = script$1;
+    const __vue_script__ = script;
 
     /* template */
     var __vue_render__ = function () {
@@ -661,18 +700,30 @@
         undefined
       );
 
-    const vuetify = new vuetify$1.Vuetify();
-    const VuetifyProTipTap = vuetifyProTiptap.createVuetifyProTipTap({
-        vuetify,
-        components: {
-            VuetifyTiptap: vuetifyProTiptap.VuetifyTiptap,
-            FontFamily: __vue_component__,
-        },
-    });
-    Vue__default["default"].use(VuetifyProTipTap);
+    /**
+     * Function called when uploading an image to the editor
+     * it will read the file and return a base64 string
+     */
+    function upload(file) {
+        return new Promise((resolve) => {
+            const reader = new FileReader();
+            reader.onload = (event) => {
+                var _a;
+                if (typeof ((_a = event.target) === null || _a === void 0 ? void 0 : _a.result) === 'string') {
+                    resolve(event.target.result);
+                }
+                else {
+                    resolve('');
+                }
+            };
+            reader.onerror = () => resolve('');
+            reader.readAsDataURL(file);
+        });
+    }
+
     const packageContent = require('../package.json');
     core.VersionService.addPackageVersion(packageContent.name, packageContent.version);
-    vuetifyProTiptap.locale.setMessage('pt', {
+    zdVuetifyProTiptap.locale.setMessage('pt', {
         'editor.words': 'PALAVRAS',
         'editor.characters': 'CARACTERES',
         'editor.bold.tooltip': 'Negrito',
@@ -743,7 +794,7 @@
         'editor.fullscreen.tooltip.fullscreen': 'Tela Cheia',
         'editor.fullscreen.tooltip.exit': 'Sair da Tela Cheia',
     });
-    vuetifyProTiptap.locale.setMessage('es', {
+    zdVuetifyProTiptap.locale.setMessage('es', {
         'editor.words': 'PALABRAS',
         'editor.characters': 'CARACTERES',
         'editor.bold.tooltip': 'Negrita',
@@ -813,8 +864,41 @@
         'editor.redo.tooltip': 'Rehacer',
         'editor.fullscreen.tooltip.fullscreen': 'Pantalla completa',
         'editor.fullscreen.tooltip.exit': 'Salir de pantalla completa',
-    });
+    });
+    // install VuetifyProTipTap creating a new vuetify instance
+    // in case the user installs RichText using Vue.component()
+    const vuetify = new vuetify$1.Vuetify();
+    const VuetifyProTipTap = zdVuetifyProTiptap.createVuetifyProTipTap({
+        vuetify,
+        components: {
+            VuetifyTiptap: zdVuetifyProTiptap.VuetifyTiptap,
+            FontFamily: __vue_component__,
+        },
+    });
+    Vue__default["default"].use(VuetifyProTipTap);
+    // in case the user installs RichText using Vue.use()
+    // should install VuetifyProTipTap using the already existing vuetify instance
+    const RichTextPlugin = {
+        install(AppVue, options) {
+            setInstalled();
+            const ConfiguredTiptap = zdVuetifyProTiptap.createVuetifyProTipTap({
+                vuetify: options.vuetify,
+                components: {
+                    VuetifyTiptap: zdVuetifyProTiptap.VuetifyTiptap,
+                    FontFamily: __vue_component__,
+                },
+                config: {
+                    image: {
+                        upload,
+                    },
+                },
+            });
+            AppVue.use(ConfiguredTiptap);
+            AppVue.component('ZdRichText', __vue_component__$1);
+        },
+    };
 
+    exports.RichTextPlugin = RichTextPlugin;
     exports.ZdRichText = __vue_component__$1;
 
     Object.defineProperty(exports, '__esModule', { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/zd-richtext-vue",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "description": "RichTextVue by BVR",
   "main": "dist/rich-text-vue.umd.js",
   "module": "dist/rich-text-vue.esm.js",
@@ -20,9 +20,9 @@
     "@tiptap/pm": "^2.1.12",
     "@tiptap/starter-kit": "^2.1.12",
     "@tiptap/vue-2": "^2.1.12",
+    "@zeedhi/zd-vuetify-pro-tiptap": "1.0.*",
     "tiptap-extensions": "1.35.*",
-    "tiptap-vuetify": "2.24.*",
-    "vuetify-pro-tiptap": "^1.4.3"
+    "tiptap-vuetify": "2.24.*"
   },
   "peerDependencies": {
     "@zeedhi/vuetify": "^1.74.0",
@@ -31,5 +31,5 @@
     "vue-class-component": "7.2.*",
     "vue-property-decorator": "9.1.*"
   },
-  "gitHead": "fdef8f2b0adf4943741b90db6b59e50f256bf705"
+  "gitHead": "92f5ac1c3c2438c8c5053154993c204a51de59a0"
 }

package/types/RichText.d.ts

@@ -28,6 +28,7 @@ export default class ZdRichText extends ZdComponentRender {
     onBlur(event: Event): void;
     toolbar: import("vue").Ref<any[]>;
     toolbarReadonly: import("vue").Ref<any[]>;
+    created(): void;
     mounted(): void;
     setEditorDisabled(): void;
     destroyed(): void;

package/types/index.d.ts

@@ -1,3 +1,11 @@
-import 'vuetify-pro-tiptap/lib/style.css';
+import { Vuetify } from '@zeedhi/vuetify';
+import '@zeedhi/zd-vuetify-pro-tiptap/lib/style.css';
+import type { VueConstructor } from 'vue';
 import ZdRichText from './RichText.vue';
-export { ZdRichText };
+declare const vuetify: any;
+declare const RichTextPlugin: {
+    install(AppVue: VueConstructor, options: {
+        vuetify: Vuetify;
+    }): void;
+};
+export { ZdRichText, RichTextPlugin };

package/types/utils/check-install.d.ts

@@ -0,0 +1,3 @@
+declare const setInstalled: () => void;
+declare const getInstalled: () => boolean;
+export { setInstalled, getInstalled };

package/types/utils/upload.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Function called when uploading an image to the editor
+ * it will read the file and return a base64 string
+ */
+export default function upload(file: File): Promise<string>;