@zeedhi/zd-richtext-vue 1.5.3 → 1.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/rich-text-vue.esm.js +23 -27
  2. package/dist/rich-text-vue.umd.js +23 -27
  3. package/package.json +2 -2
  4. package/types/RichText.d.ts +4 -1
package/dist/rich-text-vue.esm.js CHANGED
@@ -178,7 +178,7 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
178
178
  }
179
179
  input(instanceInput) {
180
180
  if (instanceInput) {
181
- this.instance.input(this.content);
181
+ this.instance.input(this.instance.content);
182
182
  }
183
183
  }
184
184
  onFocus(event) {
@@ -200,38 +200,29 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
200
200
  }
201
201
  }
202
202
  mounted() {
203
- var _a;
204
203
  if (this.$refs.tiptap.editor) {
205
204
  this.instance.formatGetter.html = this.$refs.tiptap.editor.getHTML.bind(this.$refs.tiptap.editor);
206
205
  this.instance.formatGetter.json = this.$refs.tiptap.editor.getJSON.bind(this.$refs.tiptap.editor);
207
206
  this.$refs.tiptap.editor.on('focus', this.onFocus);
208
207
  this.$refs.tiptap.editor.on('blur', this.onBlur);
209
208
  }
210
- if (!this.readonly) {
211
- const header = this.$el.querySelector('header.py-1.ps-1.vuetify-pro-tiptap-editor__toolbar.v-sheet.v-toolbar');
212
- (_a = header) === null || _a === void 0 ? void 0 : _a.style.setProperty('background-color', this.toolbarColor || 'var(--v-primary-base)', 'important');
213
- if (this.cardColor) {
214
- const card = this.$el.querySelector('.vuetify-pro-tiptap-editor__content');
215
- card.style.setProperty('background-color', this.cardColor, 'important');
216
- }
217
- }
218
209
  this.changeLanguage();
219
210
  I18n.registerChangeListener(this.changeLanguage);
220
- this.setEditorDisabled();
221
211
  this.isMounted = true;
222
212
  }
223
- // set tiptap editor as disabled
224
- setEditorDisabled() {
225
- const { editor } = this.$refs.tiptap;
226
- const isEditable = !(this.instance.disabled || this.readonly);
227
- if (editor)
228
- editor.setOptions({ editable: isEditable });
229
- }
230
213
  beforeDestroy() {
231
214
  I18n.unregisterChangeListener(this.changeLanguage);
232
215
  this.$refs.tiptap.editor.off('focus', this.onFocus);
233
216
  this.$refs.tiptap.editor.off('blur', this.onBlur);
234
217
  }
218
+ get cssVars() {
219
+ const toolbarColor = this.instance.readonly ? 'inherit' : this.instance.toolbarColor || 'var(--v-primary-base)';
220
+ const cardColor = this.instance.cardColor || 'inherit';
221
+ return {
222
+ '--richtext-toolbar-color': toolbarColor,
223
+ '--richtext-card-color': cardColor,
224
+ };
225
+ }
235
226
  };
236
227
  __decorate([
237
228
  PropWatch({ type: String, default: 'html' }),
@@ -507,9 +498,12 @@ var __vue_render__$1 = function () {
507
498
  "div",
508
499
  {
509
500
  class: ["zd-rich-text", "zd-elevation-2", _vm.instance.cssClass],
510
- style: {
511
- height: _vm.$formatSize(_vm.instance.height),
512
- },
501
+ style: Object.assign(
502
+ {},
503
+ { height: _vm.$formatSize(_vm.instance.height) },
504
+ _vm.$styleObject(_vm.instance.cssStyle),
505
+ _vm.cssVars
506
+ ),
513
507
  on: {
514
508
  keydown: function ($event) {
515
509
  return _vm.onKeyDown($event)
@@ -521,18 +515,20 @@ var __vue_render__$1 = function () {
521
515
  ref: "tiptap",
522
516
  class: [
523
517
  { "zd-rich-text--disabled": _vm.instance.disabled },
524
- _vm.readonly && !_vm.hasClass() && "zd-rich-text--readonly",
518
+ _vm.instance.readonly &&
519
+ !_vm.hasClass() &&
520
+ "zd-rich-text--readonly",
525
521
  ],
526
522
  attrs: {
527
523
  markdownTheme: false,
528
524
  dark: _vm.instance.dark,
529
- disabled: _vm.instance.disabled,
530
- readonly: _vm.instance.readonly,
525
+ disabled: _vm.instance.disabled || _vm.instance.readonly,
526
+ hideToolbar: _vm.instance.readonly,
531
527
  outlined: _vm.instance.outlined,
532
528
  placeholder: _vm.instance.placeholder,
533
- toolbar: _vm.readonly
529
+ toolbar: _vm.instance.readonly
534
530
  ? _vm.toolbarReadonly
535
- : _vm.enableFullscreen
531
+ : _vm.instance.enableFullscreen
536
532
  ? _vm.toolbarFullscreen
537
533
  : _vm.toolbar,
538
534
  rounded: "",
@@ -605,7 +601,7 @@ __vue_render__$1._withStripped = true;
605
601
  /* style */
606
602
  const __vue_inject_styles__$1 = function (inject) {
607
603
  if (!inject) return
608
- inject("data-v-58cf5ffa_0", { source: ".zd-rich-text #tippy-1 {\n display: none;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor--fullscreen .vuetify-pro-tiptap-editor__content {\n height: -webkit-fill-available;\n}\n.zd-rich-text .v-label {\n top: calc(-10px - var(--spacing-2));\n max-width: 100%;\n transform: none;\n font-size: var(--zd-font-body1-size);\n left: 0 !important;\n line-height: 15px;\n height: auto;\n font-weight: var(--zd-font-body1-weight);\n}\n.zd-rich-text .label--focused {\n transition: 0ms;\n color: var(--v-primary-base);\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 });
604
+ inject("data-v-fbcdcaaa_0", { source: ".zd-rich-text #tippy-1 {\n display: none;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor--fullscreen .vuetify-pro-tiptap-editor__content {\n height: -webkit-fill-available;\n}\n.zd-rich-text .v-label {\n top: calc(-10px - var(--spacing-2));\n max-width: 100%;\n transform: none;\n font-size: var(--zd-font-body1-size);\n left: 0 !important;\n line-height: 15px;\n height: auto;\n font-weight: var(--zd-font-body1-weight);\n}\n.zd-rich-text .label--focused {\n transition: 0ms;\n color: var(--v-primary-base);\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--readonly .vuetify-pro-tiptap-editor.v-card.v-card--flat.v-sheet.theme--light.rounded {\n background-color: #fafafa !important;\n}\n.zd-rich-text .zd-rich-text--readonly .vuetify-pro-tiptap-editor.v-card.v-card--flat.v-sheet.theme--dark.rounded {\n background-color: #303030 !important;\n}\n.zd-rich-text .zd-rich-text--disabled .zd-rich-text-content, .zd-rich-text .zd-rich-text--readonly .zd-rich-text-content {\n cursor: default !important;\n pointer-events: none;\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 header.py-1.ps-1.vuetify-pro-tiptap-editor__toolbar {\n background-color: var(--richtext-toolbar-color) !important;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor__content {\n background-color: var(--richtext-card-color) !important;\n}\n.zd-rich-text .v-toolbar__content button.v-btn {\n color: #ffffff !important;\n}", map: undefined, media: undefined });
609
605
 
610
606
  };
611
607
  /* scoped */
package/dist/rich-text-vue.umd.js CHANGED
@@ -178,7 +178,7 @@
178
178
  }
179
179
  input(instanceInput) {
180
180
  if (instanceInput) {
181
- this.instance.input(this.content);
181
+ this.instance.input(this.instance.content);
182
182
  }
183
183
  }
184
184
  onFocus(event) {
@@ -200,38 +200,29 @@
200
200
  }
201
201
  }
202
202
  mounted() {
203
- var _a;
204
203
  if (this.$refs.tiptap.editor) {
205
204
  this.instance.formatGetter.html = this.$refs.tiptap.editor.getHTML.bind(this.$refs.tiptap.editor);
206
205
  this.instance.formatGetter.json = this.$refs.tiptap.editor.getJSON.bind(this.$refs.tiptap.editor);
207
206
  this.$refs.tiptap.editor.on('focus', this.onFocus);
208
207
  this.$refs.tiptap.editor.on('blur', this.onBlur);
209
208
  }
210
- if (!this.readonly) {
211
- const header = this.$el.querySelector('header.py-1.ps-1.vuetify-pro-tiptap-editor__toolbar.v-sheet.v-toolbar');
212
- (_a = header) === null || _a === void 0 ? void 0 : _a.style.setProperty('background-color', this.toolbarColor || 'var(--v-primary-base)', 'important');
213
- if (this.cardColor) {
214
- const card = this.$el.querySelector('.vuetify-pro-tiptap-editor__content');
215
- card.style.setProperty('background-color', this.cardColor, 'important');
216
- }
217
- }
218
209
  this.changeLanguage();
219
210
  core.I18n.registerChangeListener(this.changeLanguage);
220
- this.setEditorDisabled();
221
211
  this.isMounted = true;
222
212
  }
223
- // set tiptap editor as disabled
224
- setEditorDisabled() {
225
- const { editor } = this.$refs.tiptap;
226
- const isEditable = !(this.instance.disabled || this.readonly);
227
- if (editor)
228
- editor.setOptions({ editable: isEditable });
229
- }
230
213
  beforeDestroy() {
231
214
  core.I18n.unregisterChangeListener(this.changeLanguage);
232
215
  this.$refs.tiptap.editor.off('focus', this.onFocus);
233
216
  this.$refs.tiptap.editor.off('blur', this.onBlur);
234
217
  }
218
+ get cssVars() {
219
+ const toolbarColor = this.instance.readonly ? 'inherit' : this.instance.toolbarColor || 'var(--v-primary-base)';
220
+ const cardColor = this.instance.cardColor || 'inherit';
221
+ return {
222
+ '--richtext-toolbar-color': toolbarColor,
223
+ '--richtext-card-color': cardColor,
224
+ };
225
+ }
235
226
  };
236
227
  __decorate([
237
228
  vuetify$1.PropWatch({ type: String, default: 'html' }),
@@ -507,9 +498,12 @@
507
498
  "div",
508
499
  {
509
500
  class: ["zd-rich-text", "zd-elevation-2", _vm.instance.cssClass],
510
- style: {
511
- height: _vm.$formatSize(_vm.instance.height),
512
- },
501
+ style: Object.assign(
502
+ {},
503
+ { height: _vm.$formatSize(_vm.instance.height) },
504
+ _vm.$styleObject(_vm.instance.cssStyle),
505
+ _vm.cssVars
506
+ ),
513
507
  on: {
514
508
  keydown: function ($event) {
515
509
  return _vm.onKeyDown($event)
@@ -521,18 +515,20 @@
521
515
  ref: "tiptap",
522
516
  class: [
523
517
  { "zd-rich-text--disabled": _vm.instance.disabled },
524
- _vm.readonly && !_vm.hasClass() && "zd-rich-text--readonly",
518
+ _vm.instance.readonly &&
519
+ !_vm.hasClass() &&
520
+ "zd-rich-text--readonly",
525
521
  ],
526
522
  attrs: {
527
523
  markdownTheme: false,
528
524
  dark: _vm.instance.dark,
529
- disabled: _vm.instance.disabled,
530
- readonly: _vm.instance.readonly,
525
+ disabled: _vm.instance.disabled || _vm.instance.readonly,
526
+ hideToolbar: _vm.instance.readonly,
531
527
  outlined: _vm.instance.outlined,
532
528
  placeholder: _vm.instance.placeholder,
533
- toolbar: _vm.readonly
529
+ toolbar: _vm.instance.readonly
534
530
  ? _vm.toolbarReadonly
535
- : _vm.enableFullscreen
531
+ : _vm.instance.enableFullscreen
536
532
  ? _vm.toolbarFullscreen
537
533
  : _vm.toolbar,
538
534
  rounded: "",
@@ -605,7 +601,7 @@
605
601
  /* style */
606
602
  const __vue_inject_styles__$1 = function (inject) {
607
603
  if (!inject) return
608
- inject("data-v-58cf5ffa_0", { source: ".zd-rich-text #tippy-1 {\n display: none;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor--fullscreen .vuetify-pro-tiptap-editor__content {\n height: -webkit-fill-available;\n}\n.zd-rich-text .v-label {\n top: calc(-10px - var(--spacing-2));\n max-width: 100%;\n transform: none;\n font-size: var(--zd-font-body1-size);\n left: 0 !important;\n line-height: 15px;\n height: auto;\n font-weight: var(--zd-font-body1-weight);\n}\n.zd-rich-text .label--focused {\n transition: 0ms;\n color: var(--v-primary-base);\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 });
604
+ inject("data-v-fbcdcaaa_0", { source: ".zd-rich-text #tippy-1 {\n display: none;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor--fullscreen .vuetify-pro-tiptap-editor__content {\n height: -webkit-fill-available;\n}\n.zd-rich-text .v-label {\n top: calc(-10px - var(--spacing-2));\n max-width: 100%;\n transform: none;\n font-size: var(--zd-font-body1-size);\n left: 0 !important;\n line-height: 15px;\n height: auto;\n font-weight: var(--zd-font-body1-weight);\n}\n.zd-rich-text .label--focused {\n transition: 0ms;\n color: var(--v-primary-base);\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--readonly .vuetify-pro-tiptap-editor.v-card.v-card--flat.v-sheet.theme--light.rounded {\n background-color: #fafafa !important;\n}\n.zd-rich-text .zd-rich-text--readonly .vuetify-pro-tiptap-editor.v-card.v-card--flat.v-sheet.theme--dark.rounded {\n background-color: #303030 !important;\n}\n.zd-rich-text .zd-rich-text--disabled .zd-rich-text-content, .zd-rich-text .zd-rich-text--readonly .zd-rich-text-content {\n cursor: default !important;\n pointer-events: none;\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 header.py-1.ps-1.vuetify-pro-tiptap-editor__toolbar {\n background-color: var(--richtext-toolbar-color) !important;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor__content {\n background-color: var(--richtext-card-color) !important;\n}\n.zd-rich-text .v-toolbar__content button.v-btn {\n color: #ffffff !important;\n}", map: undefined, media: undefined });
609
605
 
610
606
  };
611
607
  /* scoped */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zeedhi/zd-richtext-vue",
3
- "version": "1.5.3",
3
+ "version": "1.6.1",
4
4
  "description": "RichTextVue by BVR",
5
5
  "main": "dist/rich-text-vue.umd.js",
6
6
  "module": "dist/rich-text-vue.esm.js",
@@ -31,5 +31,5 @@
31
31
  "vue-class-component": "7.2.*",
32
32
  "vue-property-decorator": "9.1.*"
33
33
  },
34
- "gitHead": "8836006ea62574c8f60d2efc40a411b02bafa569"
34
+ "gitHead": "0bb43f4fb5bb45c661bee1a771d04e62619259bf"
35
35
  }
package/types/RichText.d.ts CHANGED
@@ -34,6 +34,9 @@ export default class ZdRichText extends ZdComponentRender {
34
34
  toolbarFullscreen: import("vue").Ref<any[]>;
35
35
  created(): void;
36
36
  mounted(): void;
37
- setEditorDisabled(): void;
38
37
  beforeDestroy(): void;
38
+ get cssVars(): {
39
+ '--richtext-toolbar-color': string;
40
+ '--richtext-card-color': string;
41
+ };
39
42
  }