@zeedhi/zd-richtext-vue 1.3.2 → 1.4.0

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 (6) hide show
  1. package/dist/rich-text-vue.esm.js +236 -20
  2. package/dist/rich-text-vue.umd.js +234 -19
  3. package/package.json +2 -2
  4. package/types/RichText.d.ts +8 -3
  5. package/types/extensions/FontFamily/FontFamily.d.ts +9 -0
  6. package/types/index.d.ts +1 -1
package/dist/rich-text-vue.esm.js CHANGED
@@ -1,11 +1,13 @@
1
- import Vue from 'vue';
2
1
  import { I18n, VersionService } from '@zeedhi/core';
3
2
  import { PropWatch, ZdComponentRender, setFillHeight, Vuetify } from '@zeedhi/vuetify';
3
+ import Vue, { ref } from 'vue';
4
4
  import { locale, createVuetifyProTipTap, VuetifyTiptap } from 'vuetify-pro-tiptap';
5
- import { Component } from 'vue-property-decorator';
6
- import { RichText } from '@zeedhi/zd-richtext-common';
7
- import { EditorContent } from '@tiptap/vue-2';
8
5
  import 'vuetify-pro-tiptap/lib/style.css';
6
+ import { FontFamily as FontFamily$1 } from '@tiptap/extension-font-family';
7
+ import { EditorContent } from '@tiptap/vue-2';
8
+ import { RichText } from '@zeedhi/zd-richtext-common';
9
+ import { Watch, Component as Component$1 } from 'vue-property-decorator';
10
+ import Component from 'vue-class-component';
9
11
 
10
12
  /*! *****************************************************************************
11
13
  Copyright (c) Microsoft Corporation.
@@ -33,11 +35,40 @@ function __metadata(metadataKey, metadataValue) {
33
35
  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
34
36
  }
35
37
 
38
+ const fonts = [
39
+ { font: 'Inter', title: 'Inter' },
40
+ { font: 'Roboto', title: 'Roboto' },
41
+ { font: 'serif', title: 'Serif' },
42
+ { font: 'monospace', title: 'Monospace' },
43
+ ];
44
+ let FontFamily = class FontFamily extends ZdComponentRender {
45
+ setFontStyle(editor, font) {
46
+ editor.chain().focus().setFontFamily(font).run();
47
+ }
48
+ };
49
+ __decorate([
50
+ PropWatch({ type: Object, default: '' }),
51
+ __metadata("design:type", Object)
52
+ ], FontFamily.prototype, "editor", void 0);
53
+ __decorate([
54
+ PropWatch({ type: Object, default: '' }),
55
+ __metadata("design:type", Object)
56
+ ], FontFamily.prototype, "attrs", void 0);
57
+ __decorate([
58
+ PropWatch({ type: Array, default: () => (fonts) }),
59
+ __metadata("design:type", Array)
60
+ ], FontFamily.prototype, "fonts", void 0);
61
+ FontFamily = __decorate([
62
+ Component
63
+ ], FontFamily);
64
+ var script$1 = FontFamily;
65
+
36
66
  let ZdRichText = class ZdRichText extends ZdComponentRender {
37
67
  constructor() {
38
68
  super(...arguments);
39
69
  this.instanceType = RichText;
40
- this.toolbar = [
70
+ this.extensions = [FontFamily$1];
71
+ this.toolbar = ref([
41
72
  'bold',
42
73
  'italic',
43
74
  'underline',
@@ -71,7 +102,15 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
71
102
  // "blockquote",
72
103
  'rule',
73
104
  'code',
74
- ];
105
+ '|',
106
+ // "codeBlock",
107
+ // "|",
108
+ // "clear",
109
+ // "fullscreen",
110
+ // "undo",
111
+ // "redo",
112
+ '#fontFamily',
113
+ ]);
75
114
  }
76
115
  onKeyDown(event) {
77
116
  this.instance.onKeyDown(this.$el, event.key);
@@ -80,11 +119,28 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
80
119
  const newLanguage = I18n.instance.language.split('-')[0];
81
120
  locale.setLang(newLanguage);
82
121
  }
122
+ input(instanceInput) {
123
+ if (instanceInput) {
124
+ this.instance.input(this.content);
125
+ }
126
+ }
127
+ onFocus(event) {
128
+ this.instance.onFocus(event);
129
+ this.initialFocusValue = this.instance.content;
130
+ }
131
+ onBlur(event) {
132
+ this.instance.onBlur(event);
133
+ if (this.initialFocusValue !== this.instance.content) {
134
+ this.instance.onChange(this.instance.content);
135
+ }
136
+ }
83
137
  mounted() {
84
138
  var _a;
85
139
  if (this.$refs.tiptap.editor) {
86
140
  this.instance.formatGetter.html = this.$refs.tiptap.editor.getHTML.bind(this.$refs.tiptap.editor);
87
141
  this.instance.formatGetter.json = this.$refs.tiptap.editor.getJSON.bind(this.$refs.tiptap.editor);
142
+ this.$refs.tiptap.editor.on('focus', this.onFocus);
143
+ this.$refs.tiptap.editor.on('blur', this.onBlur);
88
144
  }
89
145
  const header = this.$el.querySelector('header.py-1.ps-1.vuetify-pro-tiptap-editor__toolbar.v-sheet.v-toolbar');
90
146
  (_a = header) === null || _a === void 0 ? void 0 : _a.style.setProperty('background-color', this.toolbarColor || 'var(--v-primary-base)', 'important');
@@ -100,6 +156,8 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
100
156
  }
101
157
  destroyed() {
102
158
  I18n.unregisterChangeListener(this.changeLanguage);
159
+ this.$refs.tiptap.editor.off('focus', this.onFocus);
160
+ this.$refs.tiptap.editor.off('blur', this.onBlur);
103
161
  }
104
162
  };
105
163
  __decorate([
@@ -129,6 +187,10 @@ __decorate([
129
187
  PropWatch({ type: String, default: '' }),
130
188
  __metadata("design:type", String)
131
189
  ], ZdRichText.prototype, "cardColor", void 0);
190
+ __decorate([
191
+ PropWatch({ type: Array, default: () => (fonts) }),
192
+ __metadata("design:type", Array)
193
+ ], ZdRichText.prototype, "fonts", void 0);
132
194
  __decorate([
133
195
  PropWatch({
134
196
  type: [Boolean, String],
@@ -164,8 +226,14 @@ __decorate([
164
226
  }),
165
227
  __metadata("design:type", Boolean)
166
228
  ], ZdRichText.prototype, "fillHeight", void 0);
229
+ __decorate([
230
+ Watch('instance.content'),
231
+ __metadata("design:type", Function),
232
+ __metadata("design:paramtypes", [String]),
233
+ __metadata("design:returntype", void 0)
234
+ ], ZdRichText.prototype, "input", null);
167
235
  ZdRichText = __decorate([
168
- Component({
236
+ Component$1({
169
237
  components: { EditorContent },
170
238
  })
171
239
  ], ZdRichText);
@@ -300,10 +368,10 @@ function addStyle(id, css) {
300
368
  }
301
369
 
302
370
  /* script */
303
- const __vue_script__ = script;
371
+ const __vue_script__$1 = script;
304
372
 
305
373
  /* template */
306
- var __vue_render__ = function () {
374
+ var __vue_render__$1 = function () {
307
375
  var _vm = this;
308
376
  var _h = _vm.$createElement;
309
377
  var _c = _vm._self._c || _h;
@@ -341,6 +409,7 @@ var __vue_render__ = function () {
341
409
  toolbar: _vm.toolbar,
342
410
  rounded: "",
343
411
  "max-width": _vm.instance.width,
412
+ extensions: _vm.extensions,
344
413
  },
345
414
  scopedSlots: _vm._u([
346
415
  {
@@ -365,6 +434,23 @@ var __vue_render__ = function () {
365
434
  return [_c("span")]
366
435
  },
367
436
  },
437
+ {
438
+ key: "fontFamily",
439
+ fn: function (ref) {
440
+ var editor = ref.editor;
441
+ var attrs = ref.attrs;
442
+ return [
443
+ _c("FontFamily", {
444
+ attrs: {
445
+ name: _vm.instance.name + "-fontFamily",
446
+ editor: editor,
447
+ attrs: attrs,
448
+ fonts: _vm.instance.fonts,
449
+ },
450
+ }),
451
+ ]
452
+ },
453
+ },
368
454
  ]),
369
455
  model: {
370
456
  value: _vm.instance.content,
@@ -378,21 +464,150 @@ var __vue_render__ = function () {
378
464
  1
379
465
  )
380
466
  };
381
- var __vue_staticRenderFns__ = [];
382
- __vue_render__._withStripped = true;
467
+ var __vue_staticRenderFns__$1 = [];
468
+ __vue_render__$1._withStripped = true;
383
469
 
384
470
  /* style */
385
- const __vue_inject_styles__ = function (inject) {
471
+ const __vue_inject_styles__$1 = function (inject) {
386
472
  if (!inject) return
387
- inject("data-v-2d68740c_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 });
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 });
388
474
 
389
475
  };
390
476
  /* scoped */
477
+ const __vue_scope_id__$1 = undefined;
478
+ /* module identifier */
479
+ const __vue_module_identifier__$1 = undefined;
480
+ /* functional template */
481
+ const __vue_is_functional_template__$1 = false;
482
+ /* style inject SSR */
483
+
484
+ /* style inject shadow dom */
485
+
486
+
487
+
488
+ const __vue_component__$1 = /*#__PURE__*/normalizeComponent(
489
+ { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
490
+ __vue_inject_styles__$1,
491
+ __vue_script__$1,
492
+ __vue_scope_id__$1,
493
+ __vue_is_functional_template__$1,
494
+ __vue_module_identifier__$1,
495
+ false,
496
+ createInjector,
497
+ undefined,
498
+ undefined
499
+ );
500
+
501
+ /* script */
502
+ const __vue_script__ = script$1;
503
+
504
+ /* template */
505
+ var __vue_render__ = function () {
506
+ var _vm = this;
507
+ var _h = _vm.$createElement;
508
+ var _c = _vm._self._c || _h;
509
+ return _c(
510
+ "v-menu",
511
+ {
512
+ attrs: { "offset-y": "" },
513
+ scopedSlots: _vm._u([
514
+ {
515
+ key: "activator",
516
+ fn: function (ref) {
517
+ var onMenu = ref.on;
518
+ var attrs = ref.attrs;
519
+ return [
520
+ _c(
521
+ "v-tooltip",
522
+ {
523
+ attrs: { bottom: "" },
524
+ scopedSlots: _vm._u(
525
+ [
526
+ {
527
+ key: "activator",
528
+ fn: function (ref) {
529
+ var onTooltip = ref.on;
530
+ return [
531
+ _c(
532
+ "v-btn",
533
+ _vm._g(
534
+ _vm._b(
535
+ {
536
+ attrs: {
537
+ color: "primary",
538
+ dark: "",
539
+ text: "",
540
+ "aria-label": "Font Family",
541
+ },
542
+ },
543
+ "v-btn",
544
+ attrs,
545
+ false
546
+ ),
547
+ Object.assign({}, onMenu, onTooltip)
548
+ ),
549
+ [
550
+ _c("v-icon", [
551
+ _vm._v(
552
+ _vm._s(_vm.$getIcon("mdi-format-font"))
553
+ ),
554
+ ]),
555
+ ],
556
+ 1
557
+ ),
558
+ ]
559
+ },
560
+ },
561
+ ],
562
+ null,
563
+ true
564
+ ),
565
+ },
566
+ [_vm._v(" "), _c("span", [_vm._v("Font Family")])]
567
+ ),
568
+ ]
569
+ },
570
+ },
571
+ ]),
572
+ },
573
+ [
574
+ _vm._v(" "),
575
+ _c(
576
+ "v-list",
577
+ _vm._l(_vm.fonts, function (item, index) {
578
+ return _c(
579
+ "v-list-item",
580
+ {
581
+ key: index,
582
+ on: {
583
+ click: function ($event) {
584
+ return _vm.setFontStyle(_vm.editor, item.font)
585
+ },
586
+ },
587
+ },
588
+ [_c("v-list-item-title", [_vm._v(_vm._s(item.title))])],
589
+ 1
590
+ )
591
+ }),
592
+ 1
593
+ ),
594
+ ],
595
+ 1
596
+ )
597
+ };
598
+ var __vue_staticRenderFns__ = [];
599
+ __vue_render__._withStripped = true;
600
+
601
+ /* style */
602
+ const __vue_inject_styles__ = undefined;
603
+ /* scoped */
391
604
  const __vue_scope_id__ = undefined;
392
605
  /* module identifier */
393
606
  const __vue_module_identifier__ = undefined;
394
607
  /* functional template */
395
608
  const __vue_is_functional_template__ = false;
609
+ /* style inject */
610
+
396
611
  /* style inject SSR */
397
612
 
398
613
  /* style inject shadow dom */
@@ -407,7 +622,7 @@ __vue_render__._withStripped = true;
407
622
  __vue_is_functional_template__,
408
623
  __vue_module_identifier__,
409
624
  false,
410
- createInjector,
625
+ undefined,
411
626
  undefined,
412
627
  undefined
413
628
  );
@@ -417,6 +632,7 @@ const VuetifyProTipTap = createVuetifyProTipTap({
417
632
  vuetify,
418
633
  components: {
419
634
  VuetifyTiptap,
635
+ FontFamily: __vue_component__,
420
636
  },
421
637
  });
422
638
  Vue.use(VuetifyProTipTap);
@@ -466,11 +682,11 @@ locale.setMessage('pt', {
466
682
  'editor.image.dialog.form.alt': 'Alt',
467
683
  'editor.image.dialog.form.aspectRatio': 'Manter Proporções Originais',
468
684
  'editor.image.dialog.form.file': 'Arquivo',
469
- 'editor.image.dialog.button.apply': 'aplicar',
685
+ 'editor.image.dialog.button.apply': 'Aplicar',
470
686
  'editor.video.tooltip': 'Vídeo',
471
687
  'editor.video.dialog.title': 'Inserir vídeo',
472
688
  'editor.video.dialog.link': 'link',
473
- 'editor.video.dialog.button.apply': 'aplicar',
689
+ 'editor.video.dialog.button.apply': 'Aplicar',
474
690
  'editor.video.remove.tooltip': 'Remover',
475
691
  'editor.table.tooltip': 'Tabela',
476
692
  'editor.table.menu.insert_table': 'Inserir Tabela',
@@ -537,11 +753,11 @@ locale.setMessage('es', {
537
753
  'editor.image.dialog.form.alt': 'Texto Alternativo',
538
754
  'editor.image.dialog.form.aspectRatio': 'Mantener proporciones originales',
539
755
  'editor.image.dialog.form.file': 'Archivo',
540
- 'editor.image.dialog.button.apply': 'aplicar',
756
+ 'editor.image.dialog.button.apply': 'Aplicar',
541
757
  'editor.video.tooltip': 'Video',
542
758
  'editor.video.dialog.title': 'Insertar video',
543
- 'editor.video.dialog.link': 'enlace',
544
- 'editor.video.dialog.button.apply': 'aplicar',
759
+ 'editor.video.dialog.link': 'Enlace',
760
+ 'editor.video.dialog.button.apply': 'Aplicar',
545
761
  'editor.video.remove.tooltip': 'Eliminar',
546
762
  'editor.table.tooltip': 'Tabla',
547
763
  'editor.table.menu.insert_table': 'Insertar tabla',
@@ -565,4 +781,4 @@ locale.setMessage('es', {
565
781
  'editor.fullscreen.tooltip.exit': 'Salir de pantalla completa',
566
782
  });
567
783
 
568
- export { __vue_component__ as ZdRichText };
784
+ export { __vue_component__$1 as ZdRichText };
package/dist/rich-text-vue.umd.js CHANGED
@@ -1,12 +1,13 @@
1
1
  (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@zeedhi/core'), require('@zeedhi/vuetify'), require('vuetify-pro-tiptap'), require('vue-property-decorator'), require('@zeedhi/zd-richtext-common'), require('@tiptap/vue-2'), require('vuetify-pro-tiptap/lib/style.css')) :
3
- typeof define === 'function' && define.amd ? define(['exports', 'vue', '@zeedhi/core', '@zeedhi/vuetify', 'vuetify-pro-tiptap', 'vue-property-decorator', '@zeedhi/zd-richtext-common', '@tiptap/vue-2', 'vuetify-pro-tiptap/lib/style.css'], factory) :
4
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/zd-richtext-vue"] = {}, global.vue, global.core, global["@zeedhi/vuetify"], global["vuetify-pro-tiptap"], global["vue-property-decorator"], global["@zeedhi/zd-richtext-common"], global["@tiptap/vue-2"]));
5
- })(this, (function (exports, Vue, core, vuetify$1, vuetifyProTiptap, vuePropertyDecorator, zdRichtextCommon, vue2) { 'use strict';
2
+ 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')) :
3
+ 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) :
4
+ (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"]));
5
+ })(this, (function (exports, core, vuetify$1, Vue, vuetifyProTiptap, style_css, extensionFontFamily, vue2, zdRichtextCommon, vuePropertyDecorator, Component) { 'use strict';
6
6
 
7
7
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
8
 
9
9
  var Vue__default = /*#__PURE__*/_interopDefaultLegacy(Vue);
10
+ var Component__default = /*#__PURE__*/_interopDefaultLegacy(Component);
10
11
 
11
12
  /*! *****************************************************************************
12
13
  Copyright (c) Microsoft Corporation.
@@ -34,11 +35,40 @@
34
35
  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
35
36
  }
36
37
 
38
+ const fonts = [
39
+ { font: 'Inter', title: 'Inter' },
40
+ { font: 'Roboto', title: 'Roboto' },
41
+ { font: 'serif', title: 'Serif' },
42
+ { font: 'monospace', title: 'Monospace' },
43
+ ];
44
+ let FontFamily = class FontFamily extends vuetify$1.ZdComponentRender {
45
+ setFontStyle(editor, font) {
46
+ editor.chain().focus().setFontFamily(font).run();
47
+ }
48
+ };
49
+ __decorate([
50
+ vuetify$1.PropWatch({ type: Object, default: '' }),
51
+ __metadata("design:type", Object)
52
+ ], FontFamily.prototype, "editor", void 0);
53
+ __decorate([
54
+ vuetify$1.PropWatch({ type: Object, default: '' }),
55
+ __metadata("design:type", Object)
56
+ ], FontFamily.prototype, "attrs", void 0);
57
+ __decorate([
58
+ vuetify$1.PropWatch({ type: Array, default: () => (fonts) }),
59
+ __metadata("design:type", Array)
60
+ ], FontFamily.prototype, "fonts", void 0);
61
+ FontFamily = __decorate([
62
+ Component__default["default"]
63
+ ], FontFamily);
64
+ var script$1 = FontFamily;
65
+
37
66
  let ZdRichText = class ZdRichText extends vuetify$1.ZdComponentRender {
38
67
  constructor() {
39
68
  super(...arguments);
40
69
  this.instanceType = zdRichtextCommon.RichText;
41
- this.toolbar = [
70
+ this.extensions = [extensionFontFamily.FontFamily];
71
+ this.toolbar = Vue.ref([
42
72
  'bold',
43
73
  'italic',
44
74
  'underline',
@@ -72,7 +102,15 @@
72
102
  // "blockquote",
73
103
  'rule',
74
104
  'code',
75
- ];
105
+ '|',
106
+ // "codeBlock",
107
+ // "|",
108
+ // "clear",
109
+ // "fullscreen",
110
+ // "undo",
111
+ // "redo",
112
+ '#fontFamily',
113
+ ]);
76
114
  }
77
115
  onKeyDown(event) {
78
116
  this.instance.onKeyDown(this.$el, event.key);
@@ -81,11 +119,28 @@
81
119
  const newLanguage = core.I18n.instance.language.split('-')[0];
82
120
  vuetifyProTiptap.locale.setLang(newLanguage);
83
121
  }
122
+ input(instanceInput) {
123
+ if (instanceInput) {
124
+ this.instance.input(this.content);
125
+ }
126
+ }
127
+ onFocus(event) {
128
+ this.instance.onFocus(event);
129
+ this.initialFocusValue = this.instance.content;
130
+ }
131
+ onBlur(event) {
132
+ this.instance.onBlur(event);
133
+ if (this.initialFocusValue !== this.instance.content) {
134
+ this.instance.onChange(this.instance.content);
135
+ }
136
+ }
84
137
  mounted() {
85
138
  var _a;
86
139
  if (this.$refs.tiptap.editor) {
87
140
  this.instance.formatGetter.html = this.$refs.tiptap.editor.getHTML.bind(this.$refs.tiptap.editor);
88
141
  this.instance.formatGetter.json = this.$refs.tiptap.editor.getJSON.bind(this.$refs.tiptap.editor);
142
+ this.$refs.tiptap.editor.on('focus', this.onFocus);
143
+ this.$refs.tiptap.editor.on('blur', this.onBlur);
89
144
  }
90
145
  const header = this.$el.querySelector('header.py-1.ps-1.vuetify-pro-tiptap-editor__toolbar.v-sheet.v-toolbar');
91
146
  (_a = header) === null || _a === void 0 ? void 0 : _a.style.setProperty('background-color', this.toolbarColor || 'var(--v-primary-base)', 'important');
@@ -101,6 +156,8 @@
101
156
  }
102
157
  destroyed() {
103
158
  core.I18n.unregisterChangeListener(this.changeLanguage);
159
+ this.$refs.tiptap.editor.off('focus', this.onFocus);
160
+ this.$refs.tiptap.editor.off('blur', this.onBlur);
104
161
  }
105
162
  };
106
163
  __decorate([
@@ -130,6 +187,10 @@
130
187
  vuetify$1.PropWatch({ type: String, default: '' }),
131
188
  __metadata("design:type", String)
132
189
  ], ZdRichText.prototype, "cardColor", void 0);
190
+ __decorate([
191
+ vuetify$1.PropWatch({ type: Array, default: () => (fonts) }),
192
+ __metadata("design:type", Array)
193
+ ], ZdRichText.prototype, "fonts", void 0);
133
194
  __decorate([
134
195
  vuetify$1.PropWatch({
135
196
  type: [Boolean, String],
@@ -165,6 +226,12 @@
165
226
  }),
166
227
  __metadata("design:type", Boolean)
167
228
  ], ZdRichText.prototype, "fillHeight", void 0);
229
+ __decorate([
230
+ vuePropertyDecorator.Watch('instance.content'),
231
+ __metadata("design:type", Function),
232
+ __metadata("design:paramtypes", [String]),
233
+ __metadata("design:returntype", void 0)
234
+ ], ZdRichText.prototype, "input", null);
168
235
  ZdRichText = __decorate([
169
236
  vuePropertyDecorator.Component({
170
237
  components: { EditorContent: vue2.EditorContent },
@@ -301,10 +368,10 @@
301
368
  }
302
369
 
303
370
  /* script */
304
- const __vue_script__ = script;
371
+ const __vue_script__$1 = script;
305
372
 
306
373
  /* template */
307
- var __vue_render__ = function () {
374
+ var __vue_render__$1 = function () {
308
375
  var _vm = this;
309
376
  var _h = _vm.$createElement;
310
377
  var _c = _vm._self._c || _h;
@@ -342,6 +409,7 @@
342
409
  toolbar: _vm.toolbar,
343
410
  rounded: "",
344
411
  "max-width": _vm.instance.width,
412
+ extensions: _vm.extensions,
345
413
  },
346
414
  scopedSlots: _vm._u([
347
415
  {
@@ -366,6 +434,23 @@
366
434
  return [_c("span")]
367
435
  },
368
436
  },
437
+ {
438
+ key: "fontFamily",
439
+ fn: function (ref) {
440
+ var editor = ref.editor;
441
+ var attrs = ref.attrs;
442
+ return [
443
+ _c("FontFamily", {
444
+ attrs: {
445
+ name: _vm.instance.name + "-fontFamily",
446
+ editor: editor,
447
+ attrs: attrs,
448
+ fonts: _vm.instance.fonts,
449
+ },
450
+ }),
451
+ ]
452
+ },
453
+ },
369
454
  ]),
370
455
  model: {
371
456
  value: _vm.instance.content,
@@ -379,21 +464,150 @@
379
464
  1
380
465
  )
381
466
  };
382
- var __vue_staticRenderFns__ = [];
383
- __vue_render__._withStripped = true;
467
+ var __vue_staticRenderFns__$1 = [];
468
+ __vue_render__$1._withStripped = true;
384
469
 
385
470
  /* style */
386
- const __vue_inject_styles__ = function (inject) {
471
+ const __vue_inject_styles__$1 = function (inject) {
387
472
  if (!inject) return
388
- inject("data-v-2d68740c_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 });
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 });
389
474
 
390
475
  };
391
476
  /* scoped */
477
+ const __vue_scope_id__$1 = undefined;
478
+ /* module identifier */
479
+ const __vue_module_identifier__$1 = undefined;
480
+ /* functional template */
481
+ const __vue_is_functional_template__$1 = false;
482
+ /* style inject SSR */
483
+
484
+ /* style inject shadow dom */
485
+
486
+
487
+
488
+ const __vue_component__$1 = /*#__PURE__*/normalizeComponent(
489
+ { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
490
+ __vue_inject_styles__$1,
491
+ __vue_script__$1,
492
+ __vue_scope_id__$1,
493
+ __vue_is_functional_template__$1,
494
+ __vue_module_identifier__$1,
495
+ false,
496
+ createInjector,
497
+ undefined,
498
+ undefined
499
+ );
500
+
501
+ /* script */
502
+ const __vue_script__ = script$1;
503
+
504
+ /* template */
505
+ var __vue_render__ = function () {
506
+ var _vm = this;
507
+ var _h = _vm.$createElement;
508
+ var _c = _vm._self._c || _h;
509
+ return _c(
510
+ "v-menu",
511
+ {
512
+ attrs: { "offset-y": "" },
513
+ scopedSlots: _vm._u([
514
+ {
515
+ key: "activator",
516
+ fn: function (ref) {
517
+ var onMenu = ref.on;
518
+ var attrs = ref.attrs;
519
+ return [
520
+ _c(
521
+ "v-tooltip",
522
+ {
523
+ attrs: { bottom: "" },
524
+ scopedSlots: _vm._u(
525
+ [
526
+ {
527
+ key: "activator",
528
+ fn: function (ref) {
529
+ var onTooltip = ref.on;
530
+ return [
531
+ _c(
532
+ "v-btn",
533
+ _vm._g(
534
+ _vm._b(
535
+ {
536
+ attrs: {
537
+ color: "primary",
538
+ dark: "",
539
+ text: "",
540
+ "aria-label": "Font Family",
541
+ },
542
+ },
543
+ "v-btn",
544
+ attrs,
545
+ false
546
+ ),
547
+ Object.assign({}, onMenu, onTooltip)
548
+ ),
549
+ [
550
+ _c("v-icon", [
551
+ _vm._v(
552
+ _vm._s(_vm.$getIcon("mdi-format-font"))
553
+ ),
554
+ ]),
555
+ ],
556
+ 1
557
+ ),
558
+ ]
559
+ },
560
+ },
561
+ ],
562
+ null,
563
+ true
564
+ ),
565
+ },
566
+ [_vm._v(" "), _c("span", [_vm._v("Font Family")])]
567
+ ),
568
+ ]
569
+ },
570
+ },
571
+ ]),
572
+ },
573
+ [
574
+ _vm._v(" "),
575
+ _c(
576
+ "v-list",
577
+ _vm._l(_vm.fonts, function (item, index) {
578
+ return _c(
579
+ "v-list-item",
580
+ {
581
+ key: index,
582
+ on: {
583
+ click: function ($event) {
584
+ return _vm.setFontStyle(_vm.editor, item.font)
585
+ },
586
+ },
587
+ },
588
+ [_c("v-list-item-title", [_vm._v(_vm._s(item.title))])],
589
+ 1
590
+ )
591
+ }),
592
+ 1
593
+ ),
594
+ ],
595
+ 1
596
+ )
597
+ };
598
+ var __vue_staticRenderFns__ = [];
599
+ __vue_render__._withStripped = true;
600
+
601
+ /* style */
602
+ const __vue_inject_styles__ = undefined;
603
+ /* scoped */
392
604
  const __vue_scope_id__ = undefined;
393
605
  /* module identifier */
394
606
  const __vue_module_identifier__ = undefined;
395
607
  /* functional template */
396
608
  const __vue_is_functional_template__ = false;
609
+ /* style inject */
610
+
397
611
  /* style inject SSR */
398
612
 
399
613
  /* style inject shadow dom */
@@ -408,7 +622,7 @@
408
622
  __vue_is_functional_template__,
409
623
  __vue_module_identifier__,
410
624
  false,
411
- createInjector,
625
+ undefined,
412
626
  undefined,
413
627
  undefined
414
628
  );
@@ -418,6 +632,7 @@
418
632
  vuetify,
419
633
  components: {
420
634
  VuetifyTiptap: vuetifyProTiptap.VuetifyTiptap,
635
+ FontFamily: __vue_component__,
421
636
  },
422
637
  });
423
638
  Vue__default["default"].use(VuetifyProTipTap);
@@ -467,11 +682,11 @@
467
682
  'editor.image.dialog.form.alt': 'Alt',
468
683
  'editor.image.dialog.form.aspectRatio': 'Manter Proporções Originais',
469
684
  'editor.image.dialog.form.file': 'Arquivo',
470
- 'editor.image.dialog.button.apply': 'aplicar',
685
+ 'editor.image.dialog.button.apply': 'Aplicar',
471
686
  'editor.video.tooltip': 'Vídeo',
472
687
  'editor.video.dialog.title': 'Inserir vídeo',
473
688
  'editor.video.dialog.link': 'link',
474
- 'editor.video.dialog.button.apply': 'aplicar',
689
+ 'editor.video.dialog.button.apply': 'Aplicar',
475
690
  'editor.video.remove.tooltip': 'Remover',
476
691
  'editor.table.tooltip': 'Tabela',
477
692
  'editor.table.menu.insert_table': 'Inserir Tabela',
@@ -538,11 +753,11 @@
538
753
  'editor.image.dialog.form.alt': 'Texto Alternativo',
539
754
  'editor.image.dialog.form.aspectRatio': 'Mantener proporciones originales',
540
755
  'editor.image.dialog.form.file': 'Archivo',
541
- 'editor.image.dialog.button.apply': 'aplicar',
756
+ 'editor.image.dialog.button.apply': 'Aplicar',
542
757
  'editor.video.tooltip': 'Video',
543
758
  'editor.video.dialog.title': 'Insertar video',
544
- 'editor.video.dialog.link': 'enlace',
545
- 'editor.video.dialog.button.apply': 'aplicar',
759
+ 'editor.video.dialog.link': 'Enlace',
760
+ 'editor.video.dialog.button.apply': 'Aplicar',
546
761
  'editor.video.remove.tooltip': 'Eliminar',
547
762
  'editor.table.tooltip': 'Tabla',
548
763
  'editor.table.menu.insert_table': 'Insertar tabla',
@@ -566,7 +781,7 @@
566
781
  'editor.fullscreen.tooltip.exit': 'Salir de pantalla completa',
567
782
  });
568
783
 
569
- exports.ZdRichText = __vue_component__;
784
+ exports.ZdRichText = __vue_component__$1;
570
785
 
571
786
  Object.defineProperty(exports, '__esModule', { value: true });
572
787
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zeedhi/zd-richtext-vue",
3
- "version": "1.3.2",
3
+ "version": "1.4.0",
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": "5f202495829e7a912b0492c29f743ed5cc5a0c98"
34
+ "gitHead": "dd32b1059b0544a88a2c91098d03b16d3608ecab"
35
35
  }
package/types/RichText.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { RichText } from '@zeedhi/zd-richtext-common';
2
1
  import { ZdComponentRender } from '@zeedhi/vuetify';
2
+ import { IFonts, RichText } from '@zeedhi/zd-richtext-common';
3
3
  export default class ZdRichText extends ZdComponentRender {
4
4
  outputFormat: string;
5
5
  placeholder: string;
@@ -7,6 +7,7 @@ export default class ZdRichText extends ZdComponentRender {
7
7
  toolbarColor: string;
8
8
  content: string;
9
9
  cardColor: string;
10
+ fonts: IFonts[];
10
11
  outlined: boolean | string;
11
12
  width: number | string;
12
13
  height: number | string;
@@ -16,8 +17,12 @@ export default class ZdRichText extends ZdComponentRender {
16
17
  instanceType: typeof RichText;
17
18
  onKeyDown(event: KeyboardEvent): void;
18
19
  changeLanguage(): void;
19
- toolbar: string[];
20
+ extensions: import("@tiptap/vue-2").Extension<import("@tiptap/extension-font-family").FontFamilyOptions, any>[];
21
+ input(instanceInput: String): void;
22
+ private initialFocusValue?;
23
+ onFocus(event: Event): void;
24
+ onBlur(event: Event): void;
25
+ toolbar: import("vue").Ref<any[]>;
20
26
  mounted(): void;
21
- test: any;
22
27
  destroyed(): void;
23
28
  }
package/types/extensions/FontFamily/FontFamily.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { ZdComponentRender } from '@zeedhi/vuetify';
2
+ import { IFonts } from '@zeedhi/zd-richtext-common';
3
+ export declare const fonts: IFonts[];
4
+ export default class FontFamily extends ZdComponentRender {
5
+ editor: any;
6
+ attrs: any;
7
+ fonts: IFonts[];
8
+ setFontStyle(editor: any, font: string): void;
9
+ }
package/types/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import ZdRichText from './RichText.vue';
2
1
  import 'vuetify-pro-tiptap/lib/style.css';
2
+ import ZdRichText from './RichText.vue';
3
3
  export { ZdRichText };