@zeedhi/zd-richtext-vue 1.4.1 → 1.4.3

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 +41 -7
  2. package/dist/rich-text-vue.umd.js +41 -7
  3. package/package.json +2 -2
  4. package/types/RichText.d.ts +6 -0
package/dist/rich-text-vue.esm.js CHANGED
@@ -67,6 +67,7 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
67
67
  constructor() {
68
68
  super(...arguments);
69
69
  this.instanceType = RichText;
70
+ this.isMounted = false;
70
71
  this.extensions = [FontFamily$1];
71
72
  this.toolbar = ref([
72
73
  'bold',
@@ -111,6 +112,9 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
111
112
  // "redo",
112
113
  '#fontFamily',
113
114
  ]);
115
+ this.toolbarReadonly = ref([
116
+ // 'bold',
117
+ ]);
114
118
  }
115
119
  onKeyDown(event) {
116
120
  this.instance.onKeyDown(this.$el, event.key);
@@ -119,6 +123,9 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
119
123
  const newLanguage = I18n.instance.language.split('-')[0];
120
124
  locale.setLang(newLanguage);
121
125
  }
126
+ hasClass() {
127
+ return this.isMounted && this.$el.classList.contains('zd-form-child');
128
+ }
122
129
  input(instanceInput) {
123
130
  if (instanceInput) {
124
131
  this.instance.input(this.content);
@@ -142,17 +149,28 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
142
149
  this.$refs.tiptap.editor.on('focus', this.onFocus);
143
150
  this.$refs.tiptap.editor.on('blur', this.onBlur);
144
151
  }
145
- const header = this.$el.querySelector('header.py-1.ps-1.vuetify-pro-tiptap-editor__toolbar.v-sheet.v-toolbar');
146
- (_a = header) === null || _a === void 0 ? void 0 : _a.style.setProperty('background-color', this.toolbarColor || 'var(--v-primary-base)', 'important');
147
- if (this.cardColor) {
148
- const card = this.$el.querySelector('.vuetify-pro-tiptap-editor__content');
149
- card.style.setProperty('background-color', this.cardColor, 'important');
152
+ if (!this.readonly) {
153
+ const header = this.$el.querySelector('header.py-1.ps-1.vuetify-pro-tiptap-editor__toolbar.v-sheet.v-toolbar');
154
+ (_a = header) === null || _a === void 0 ? void 0 : _a.style.setProperty('background-color', this.toolbarColor || 'var(--v-primary-base)', 'important');
155
+ if (this.cardColor) {
156
+ const card = this.$el.querySelector('.vuetify-pro-tiptap-editor__content');
157
+ card.style.setProperty('background-color', this.cardColor, 'important');
158
+ }
150
159
  }
151
160
  this.changeLanguage();
152
161
  if (this.instance.fillHeight) {
153
162
  setFillHeight(this.$el);
154
163
  }
155
164
  I18n.registerChangeListener(this.changeLanguage);
165
+ this.setEditorDisabled();
166
+ this.isMounted = true;
167
+ }
168
+ // set tiptap editor as disabled
169
+ setEditorDisabled() {
170
+ const { editor } = this.$refs.tiptap;
171
+ const isEditable = !(this.instance.disabled || this.readonly);
172
+ if (editor)
173
+ editor.setOptions({ editable: isEditable });
156
174
  }
157
175
  destroyed() {
158
176
  I18n.unregisterChangeListener(this.changeLanguage);
@@ -175,6 +193,10 @@ __decorate([
175
193
  }),
176
194
  __metadata("design:type", Object)
177
195
  ], ZdRichText.prototype, "disabled", void 0);
196
+ __decorate([
197
+ PropWatch({ type: Boolean, default: false }),
198
+ __metadata("design:type", Boolean)
199
+ ], ZdRichText.prototype, "readonly", void 0);
178
200
  __decorate([
179
201
  PropWatch({ type: String, default: undefined }),
180
202
  __metadata("design:type", String)
@@ -219,6 +241,13 @@ __decorate([
219
241
  }),
220
242
  __metadata("design:type", Object)
221
243
  ], ZdRichText.prototype, "formatGetter", void 0);
244
+ __decorate([
245
+ PropWatch({
246
+ type: String,
247
+ default: '',
248
+ }),
249
+ __metadata("design:type", String)
250
+ ], ZdRichText.prototype, "value", void 0);
222
251
  __decorate([
223
252
  PropWatch({
224
253
  type: [Boolean, String],
@@ -400,13 +429,18 @@ var __vue_render__$1 = function () {
400
429
  [
401
430
  _c("vuetify-tiptap", {
402
431
  ref: "tiptap",
432
+ class: [
433
+ { "zd-rich-text--disabled": _vm.instance.disabled },
434
+ _vm.readonly && !_vm.hasClass() && "zd-rich-text--readonly",
435
+ ],
403
436
  attrs: {
404
437
  markdownTheme: false,
405
438
  dark: _vm.instance.dark,
406
439
  disabled: _vm.instance.disabled,
440
+ readonly: _vm.instance.readonly,
407
441
  outlined: _vm.instance.outlined,
408
442
  placeholder: _vm.instance.placeholder,
409
- toolbar: _vm.toolbar,
443
+ toolbar: _vm.readonly ? _vm.toolbarReadonly : _vm.toolbar,
410
444
  rounded: "",
411
445
  "max-width": _vm.instance.width,
412
446
  extensions: _vm.extensions,
@@ -470,7 +504,7 @@ __vue_render__$1._withStripped = true;
470
504
  /* style */
471
505
  const __vue_inject_styles__$1 = function (inject) {
472
506
  if (!inject) return
473
- inject("data-v-dca47842_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 .v-toolbar__content button.v-btn {\n color: #ffffff !important;\n}", map: undefined, media: undefined });
507
+ 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 });
474
508
 
475
509
  };
476
510
  /* scoped */
package/dist/rich-text-vue.umd.js CHANGED
@@ -67,6 +67,7 @@
67
67
  constructor() {
68
68
  super(...arguments);
69
69
  this.instanceType = zdRichtextCommon.RichText;
70
+ this.isMounted = false;
70
71
  this.extensions = [extensionFontFamily.FontFamily];
71
72
  this.toolbar = Vue.ref([
72
73
  'bold',
@@ -111,6 +112,9 @@
111
112
  // "redo",
112
113
  '#fontFamily',
113
114
  ]);
115
+ this.toolbarReadonly = Vue.ref([
116
+ // 'bold',
117
+ ]);
114
118
  }
115
119
  onKeyDown(event) {
116
120
  this.instance.onKeyDown(this.$el, event.key);
@@ -119,6 +123,9 @@
119
123
  const newLanguage = core.I18n.instance.language.split('-')[0];
120
124
  vuetifyProTiptap.locale.setLang(newLanguage);
121
125
  }
126
+ hasClass() {
127
+ return this.isMounted && this.$el.classList.contains('zd-form-child');
128
+ }
122
129
  input(instanceInput) {
123
130
  if (instanceInput) {
124
131
  this.instance.input(this.content);
@@ -142,17 +149,28 @@
142
149
  this.$refs.tiptap.editor.on('focus', this.onFocus);
143
150
  this.$refs.tiptap.editor.on('blur', this.onBlur);
144
151
  }
145
- const header = this.$el.querySelector('header.py-1.ps-1.vuetify-pro-tiptap-editor__toolbar.v-sheet.v-toolbar');
146
- (_a = header) === null || _a === void 0 ? void 0 : _a.style.setProperty('background-color', this.toolbarColor || 'var(--v-primary-base)', 'important');
147
- if (this.cardColor) {
148
- const card = this.$el.querySelector('.vuetify-pro-tiptap-editor__content');
149
- card.style.setProperty('background-color', this.cardColor, 'important');
152
+ if (!this.readonly) {
153
+ const header = this.$el.querySelector('header.py-1.ps-1.vuetify-pro-tiptap-editor__toolbar.v-sheet.v-toolbar');
154
+ (_a = header) === null || _a === void 0 ? void 0 : _a.style.setProperty('background-color', this.toolbarColor || 'var(--v-primary-base)', 'important');
155
+ if (this.cardColor) {
156
+ const card = this.$el.querySelector('.vuetify-pro-tiptap-editor__content');
157
+ card.style.setProperty('background-color', this.cardColor, 'important');
158
+ }
150
159
  }
151
160
  this.changeLanguage();
152
161
  if (this.instance.fillHeight) {
153
162
  vuetify$1.setFillHeight(this.$el);
154
163
  }
155
164
  core.I18n.registerChangeListener(this.changeLanguage);
165
+ this.setEditorDisabled();
166
+ this.isMounted = true;
167
+ }
168
+ // set tiptap editor as disabled
169
+ setEditorDisabled() {
170
+ const { editor } = this.$refs.tiptap;
171
+ const isEditable = !(this.instance.disabled || this.readonly);
172
+ if (editor)
173
+ editor.setOptions({ editable: isEditable });
156
174
  }
157
175
  destroyed() {
158
176
  core.I18n.unregisterChangeListener(this.changeLanguage);
@@ -175,6 +193,10 @@
175
193
  }),
176
194
  __metadata("design:type", Object)
177
195
  ], ZdRichText.prototype, "disabled", void 0);
196
+ __decorate([
197
+ vuetify$1.PropWatch({ type: Boolean, default: false }),
198
+ __metadata("design:type", Boolean)
199
+ ], ZdRichText.prototype, "readonly", void 0);
178
200
  __decorate([
179
201
  vuetify$1.PropWatch({ type: String, default: undefined }),
180
202
  __metadata("design:type", String)
@@ -219,6 +241,13 @@
219
241
  }),
220
242
  __metadata("design:type", Object)
221
243
  ], ZdRichText.prototype, "formatGetter", void 0);
244
+ __decorate([
245
+ vuetify$1.PropWatch({
246
+ type: String,
247
+ default: '',
248
+ }),
249
+ __metadata("design:type", String)
250
+ ], ZdRichText.prototype, "value", void 0);
222
251
  __decorate([
223
252
  vuetify$1.PropWatch({
224
253
  type: [Boolean, String],
@@ -400,13 +429,18 @@
400
429
  [
401
430
  _c("vuetify-tiptap", {
402
431
  ref: "tiptap",
432
+ class: [
433
+ { "zd-rich-text--disabled": _vm.instance.disabled },
434
+ _vm.readonly && !_vm.hasClass() && "zd-rich-text--readonly",
435
+ ],
403
436
  attrs: {
404
437
  markdownTheme: false,
405
438
  dark: _vm.instance.dark,
406
439
  disabled: _vm.instance.disabled,
440
+ readonly: _vm.instance.readonly,
407
441
  outlined: _vm.instance.outlined,
408
442
  placeholder: _vm.instance.placeholder,
409
- toolbar: _vm.toolbar,
443
+ toolbar: _vm.readonly ? _vm.toolbarReadonly : _vm.toolbar,
410
444
  rounded: "",
411
445
  "max-width": _vm.instance.width,
412
446
  extensions: _vm.extensions,
@@ -470,7 +504,7 @@
470
504
  /* style */
471
505
  const __vue_inject_styles__$1 = function (inject) {
472
506
  if (!inject) return
473
- inject("data-v-dca47842_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 .v-toolbar__content button.v-btn {\n color: #ffffff !important;\n}", map: undefined, media: undefined });
507
+ 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 });
474
508
 
475
509
  };
476
510
  /* scoped */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zeedhi/zd-richtext-vue",
3
- "version": "1.4.1",
3
+ "version": "1.4.3",
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": "adc8c7029269d32160c4e756a79a87351fe94dd9"
34
+ "gitHead": "fdef8f2b0adf4943741b90db6b59e50f256bf705"
35
35
  }
package/types/RichText.d.ts CHANGED
@@ -4,6 +4,7 @@ export default class ZdRichText extends ZdComponentRender {
4
4
  outputFormat: string;
5
5
  placeholder: string;
6
6
  disabled: boolean | string;
7
+ readonly: boolean;
7
8
  toolbarColor: string;
8
9
  content: string;
9
10
  cardColor: string;
@@ -12,17 +13,22 @@ export default class ZdRichText extends ZdComponentRender {
12
13
  width: number | string;
13
14
  height: number | string;
14
15
  formatGetter: Object | string;
16
+ value: string;
15
17
  fillHeight: boolean;
16
18
  instance: RichText;
17
19
  instanceType: typeof RichText;
18
20
  onKeyDown(event: KeyboardEvent): void;
19
21
  changeLanguage(): void;
22
+ isMounted: boolean;
23
+ hasClass(): boolean;
20
24
  extensions: import("@tiptap/vue-2").Extension<import("@tiptap/extension-font-family").FontFamilyOptions, any>[];
21
25
  input(instanceInput: String): void;
22
26
  private initialFocusValue?;
23
27
  onFocus(event: Event): void;
24
28
  onBlur(event: Event): void;
25
29
  toolbar: import("vue").Ref<any[]>;
30
+ toolbarReadonly: import("vue").Ref<any[]>;
26
31
  mounted(): void;
32
+ setEditorDisabled(): void;
27
33
  destroyed(): void;
28
34
  }