@zeedhi/zd-richtext-vue 1.2.3 → 1.3.1

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

@@ -1,6 +1,6 @@
 import Vue from 'vue';
-import { VersionService } from '@zeedhi/core';
-import { PropWatch, ZdComponentRender, Vuetify } from '@zeedhi/vuetify';
+import { I18n, VersionService } from '@zeedhi/core';
+import { PropWatch, ZdComponentRender, setFillHeight, Vuetify } from '@zeedhi/vuetify';
 import { Component } from 'vue-property-decorator';
 import { RichText } from '@zeedhi/zd-richtext-common';
 import 'tiptap-vuetify/dist/main.css';
@@ -55,10 +55,29 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
             OrderedList,
         ];
         this.instanceType = RichText;
+        this.componentKey = 1;
     }
     onKeyDown(event) {
         this.instance.onKeyDown(this.$el, event.key);
     }
+    changeLanguage() {
+        let newLanguage = I18n.instance.language.split('-')[0];
+        if (newLanguage === 'pt') {
+            newLanguage = 'ptbr';
+        }
+        this.tiptapVuetifyPlugin.vuetify.framework.lang.current = newLanguage;
+        this.componentKey += 1; // force update component render
+    }
+    mounted() {
+        this.changeLanguage();
+        if (this.instance.fillHeight) {
+            setFillHeight(this.$el);
+        }
+        I18n.registerChangeListener(this.changeLanguage);
+    }
+    destroyed() {
+        I18n.unregisterChangeListener(this.changeLanguage);
+    }
 };
 __decorate([
     PropWatch({ type: String, default: 'json' }),
@@ -104,6 +123,13 @@ __decorate([
     }),
     __metadata("design:type", Object)
 ], ZdRichText.prototype, "height", void 0);
+__decorate([
+    PropWatch({
+        type: [Boolean, String],
+        default: false,
+    }),
+    __metadata("design:type", Boolean)
+], ZdRichText.prototype, "fillHeight", void 0);
 ZdRichText = __decorate([
     Component
 ], ZdRichText);
@@ -257,10 +283,14 @@ var __vue_render__ = function () {
         },
       ],
       class: ["zd-rich-text", _vm.instance.cssClass],
+      style: {
+        height: _vm.$formatSize(_vm.instance.height),
+      },
       attrs: { id: _vm.instance.name, name: _vm.instance.name },
     },
     [
       _c("tiptap-vuetify", {
+        key: _vm.componentKey,
         attrs: {
           "output-format": _vm.instance.outputFormat,
           extensions: _vm.extensions,
@@ -274,7 +304,7 @@ var __vue_render__ = function () {
             class: "zd-rich-text-content rounded-b-md",
             outlined: _vm.instance.outlined,
             width: _vm.instance.width,
-            height: _vm.instance.height,
+            height: "100%",
             style: _vm.instance.cssStyle,
             dark: _vm.instance.dark,
             light: _vm.instance.light,
@@ -305,7 +335,7 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-6f6ebaf8_0", { source: ".zd-rich-text button.v-btn {\n  color: #ffffff !important;\n}\n.zd-rich-text-content.theme--dark {\n  background-color: #383838;\n}\n.zd-rich-text div.v-card {\n  display: flex;\n  flex-direction: column;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__toolbar {\n  display: flex;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__toolbar header {\n  background-color: var(--v-primary-base);\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__content {\n  flex-grow: 1;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__content .ProseMirror {\n  margin: var(--spacing-2) !important;\n  height: 100%;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__content .ProseMirror p {\n  margin-top: var(--spacing-2) !important;\n  margin-bottom: var(--spacing-2) !important;\n}", map: undefined, media: undefined });
+    inject("data-v-1be7bc9e_0", { source: ".zd-rich-text button.v-btn {\n  color: #ffffff !important;\n}\n.zd-rich-text-content.theme--dark {\n  background-color: #383838;\n}\n.zd-rich-text .tiptap-vuetify-editor {\n  height: 100%;\n}\n.zd-rich-text div.v-card {\n  display: flex;\n  flex-direction: column;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__toolbar {\n  display: flex;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__toolbar header {\n  background-color: var(--v-primary-base);\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__content {\n  flex-grow: 1;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__content .ProseMirror {\n  margin: var(--spacing-2) !important;\n  height: 100%;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__content .ProseMirror p {\n  margin-top: var(--spacing-2) !important;\n  margin-bottom: var(--spacing-2) !important;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */

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

@@ -58,10 +58,29 @@
                 OrderedList,
             ];
             this.instanceType = zdRichtextCommon.RichText;
+            this.componentKey = 1;
         }
         onKeyDown(event) {
             this.instance.onKeyDown(this.$el, event.key);
         }
+        changeLanguage() {
+            let newLanguage = core.I18n.instance.language.split('-')[0];
+            if (newLanguage === 'pt') {
+                newLanguage = 'ptbr';
+            }
+            this.tiptapVuetifyPlugin.vuetify.framework.lang.current = newLanguage;
+            this.componentKey += 1; // force update component render
+        }
+        mounted() {
+            this.changeLanguage();
+            if (this.instance.fillHeight) {
+                vuetify.setFillHeight(this.$el);
+            }
+            core.I18n.registerChangeListener(this.changeLanguage);
+        }
+        destroyed() {
+            core.I18n.unregisterChangeListener(this.changeLanguage);
+        }
     };
     __decorate([
         vuetify.PropWatch({ type: String, default: 'json' }),
@@ -107,6 +126,13 @@
         }),
         __metadata("design:type", Object)
     ], ZdRichText.prototype, "height", void 0);
+    __decorate([
+        vuetify.PropWatch({
+            type: [Boolean, String],
+            default: false,
+        }),
+        __metadata("design:type", Boolean)
+    ], ZdRichText.prototype, "fillHeight", void 0);
     ZdRichText = __decorate([
         vuePropertyDecorator.Component
     ], ZdRichText);
@@ -260,10 +286,14 @@
             },
           ],
           class: ["zd-rich-text", _vm.instance.cssClass],
+          style: {
+            height: _vm.$formatSize(_vm.instance.height),
+          },
           attrs: { id: _vm.instance.name, name: _vm.instance.name },
         },
         [
           _c("tiptap-vuetify", {
+            key: _vm.componentKey,
             attrs: {
               "output-format": _vm.instance.outputFormat,
               extensions: _vm.extensions,
@@ -277,7 +307,7 @@
                 class: "zd-rich-text-content rounded-b-md",
                 outlined: _vm.instance.outlined,
                 width: _vm.instance.width,
-                height: _vm.instance.height,
+                height: "100%",
                 style: _vm.instance.cssStyle,
                 dark: _vm.instance.dark,
                 light: _vm.instance.light,
@@ -308,7 +338,7 @@
       /* style */
       const __vue_inject_styles__ = function (inject) {
         if (!inject) return
-        inject("data-v-6f6ebaf8_0", { source: ".zd-rich-text button.v-btn {\n  color: #ffffff !important;\n}\n.zd-rich-text-content.theme--dark {\n  background-color: #383838;\n}\n.zd-rich-text div.v-card {\n  display: flex;\n  flex-direction: column;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__toolbar {\n  display: flex;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__toolbar header {\n  background-color: var(--v-primary-base);\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__content {\n  flex-grow: 1;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__content .ProseMirror {\n  margin: var(--spacing-2) !important;\n  height: 100%;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__content .ProseMirror p {\n  margin-top: var(--spacing-2) !important;\n  margin-bottom: var(--spacing-2) !important;\n}", map: undefined, media: undefined });
+        inject("data-v-1be7bc9e_0", { source: ".zd-rich-text button.v-btn {\n  color: #ffffff !important;\n}\n.zd-rich-text-content.theme--dark {\n  background-color: #383838;\n}\n.zd-rich-text .tiptap-vuetify-editor {\n  height: 100%;\n}\n.zd-rich-text div.v-card {\n  display: flex;\n  flex-direction: column;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__toolbar {\n  display: flex;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__toolbar header {\n  background-color: var(--v-primary-base);\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__content {\n  flex-grow: 1;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__content .ProseMirror {\n  margin: var(--spacing-2) !important;\n  height: 100%;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__content .ProseMirror p {\n  margin-top: var(--spacing-2) !important;\n  margin-bottom: var(--spacing-2) !important;\n}", map: undefined, media: undefined });
 
       };
       /* scoped */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/zd-richtext-vue",
-  "version": "1.2.3",
+  "version": "1.3.1",
   "description": "RichTextVue by BVR",
   "main": "dist/rich-text-vue.umd.js",
   "module": "dist/rich-text-vue.esm.js",
@@ -24,5 +24,5 @@
     "vue-class-component": "7.2.*",
     "vue-property-decorator": "9.1.*"
   },
-  "gitHead": "725a6d43624963e972df32f239dc3262de6e5655"
+  "gitHead": "7f117f141fe0b7f61cc45217c9827d791a408705"
 }

package/types/RichText.d.ts

@@ -9,8 +9,13 @@ export default class ZdRichText extends ZdComponentRender {
     outlined: boolean | string;
     width: number | string;
     height: number | string;
+    fillHeight: boolean;
     extensions: Array<any>;
     instance: RichText;
     instanceType: typeof RichText;
     onKeyDown(event: KeyboardEvent): void;
+    componentKey: number;
+    changeLanguage(): void;
+    mounted(): void;
+    destroyed(): void;
 }