@zeedhi/zd-richtext-vue 1.4.3 → 1.5.1

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

@@ -1,8 +1,8 @@
 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 { EditorContent } from '@tiptap/vue-2';
 import { RichText } from '@zeedhi/zd-richtext-common';
@@ -63,6 +63,12 @@ FontFamily = __decorate([
 ], FontFamily);
 var script$1 = FontFamily;
 
+let installed = false;
+const setInstalled = () => {
+    installed = true;
+};
+const getInstalled = () => installed;
+
 let ZdRichText = class ZdRichText extends ZdComponentRender {
     constructor() {
         super(...arguments);
@@ -97,7 +103,7 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
             // "outdent",
             '|',
             // "link",
-            // "image",
+            'image',
             // "video",
             // "table",
             // "blockquote",
@@ -141,6 +147,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) {
@@ -172,7 +184,7 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
         if (editor)
             editor.setOptions({ editable: isEditable });
     }
-    destroyed() {
+    beforeDestroy() {
         I18n.unregisterChangeListener(this.changeLanguage);
         this.$refs.tiptap.editor.off('focus', this.onFocus);
         this.$refs.tiptap.editor.off('blur', this.onBlur);
@@ -661,15 +673,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 +837,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 }; }
 
@@ -63,6 +63,12 @@
     ], FontFamily);
     var script$1 = FontFamily;
 
+    let installed = false;
+    const setInstalled = () => {
+        installed = true;
+    };
+    const getInstalled = () => installed;
+
     let ZdRichText = class ZdRichText extends vuetify$1.ZdComponentRender {
         constructor() {
             super(...arguments);
@@ -97,7 +103,7 @@
                 // "outdent",
                 '|',
                 // "link",
-                // "image",
+                'image',
                 // "video",
                 // "table",
                 // "blockquote",
@@ -121,7 +127,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 +147,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) {
@@ -172,7 +184,7 @@
             if (editor)
                 editor.setOptions({ editable: isEditable });
         }
-        destroyed() {
+        beforeDestroy() {
             core.I18n.unregisterChangeListener(this.changeLanguage);
             this.$refs.tiptap.editor.off('focus', this.onFocus);
             this.$refs.tiptap.editor.off('blur', this.onBlur);
@@ -661,18 +673,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 +767,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 +837,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.1",
   "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": "1b3715e1a7255b053f46736ebab3b87c1ee644f5"
 }

package/types/RichText.d.ts

@@ -28,7 +28,8 @@ 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;
+    beforeDestroy(): 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>;