@zeedhi/zd-richtext-vue 1.4.2 → 1.5.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 (8) hide show
  1. package/README.md +74 -74
  2. package/dist/rich-text-vue.esm.js +147 -37
  3. package/dist/rich-text-vue.umd.js +150 -39
  4. package/package.json +4 -4
  5. package/types/RichText.d.ts +6 -0
  6. package/types/index.d.ts +10 -2
  7. package/types/utils/check-install.d.ts +3 -0
  8. package/types/utils/upload.d.ts +5 -0
package/README.md CHANGED
@@ -1,74 +1,74 @@
1
- # Componente Rich Text para Zeedhi
2
- O componente de Rich Text é um editor de texto enriquecido com algumas funcionalidades.
3
-
4
- ![Alt Text](https://i.ibb.co/wCyr6jC/zd-rich-text.png)
5
-
6
- ## Instalação
7
- <code>npm i @zeedhi/zd-richtext</code>
8
- Com isso, dois pacotes serão instalados: o **@zeedhi/zd-richtext-common** e o **@zeedhi/zd-richtext-vue**.
9
-
10
- Após a instalação, é necessário que você você importe o pacote **@zeedhi/zd-richtext-vue** dentro de seu arquivo de configuração <code>zeedhi.ts</code>
11
- ```ts
12
- import { ZdRichText } from '@zeedhi/zd-richtext';
13
-
14
- Vue.component('ZdRichText', ZdRichText);
15
- ```
16
-
17
- Já o pacote **@zeedhi/zd-rich-text-common** deve ser importado no arquivo <code>controller</code> do componente.
18
-
19
- ## Uso Básico
20
- Para usar, defina a propriedade <code>component</code> como 'ZdRichText'.
21
-
22
- ```json
23
- {
24
- "name": "rich-text-example",
25
- "component": "ZdRichText"
26
- }
27
- ```
28
-
29
- ## Propriedades
30
-
31
- ### outputFormat
32
- <p>Tipo: <code>string</code></p>
33
- <p>Default: <code>json</code></p>
34
- <p>Descrição: Define o formato de saída do conteúdo digitado ('json' ou 'html')</p>
35
-
36
- ### placeholder
37
- <p>Tipo: <code>string</code></p>
38
- <p>Default: <code>''</code></p>
39
- <p>Descrição: Texto mostrado enquanto o editor estiver sem conteúdo</p>
40
-
41
- ### disabled
42
- <p>Tipo: <code>boolean</code></p>
43
- <p>Default: <code>false</code></p>
44
- <p>Descrição: Desabilita o componente</p>
45
-
46
- ### toolbarColor
47
- <p>Tipo: <code>string</code></p>
48
- <p>Default: <code>'#772583'</code></p>
49
- <p>Descrição: Define a cor da barra de tarefas</p>
50
-
51
- ### cardColor
52
- <p>Tipo: <code>string</code></p>
53
- <p>Default: <code>''</code></p>
54
- <p>Descrição: Define a cor do cartão de entrada de texto</p>
55
-
56
- ### outlined
57
- <p>Tipo: <code>boolean</code></p>
58
- <p>Default: <code>false</code></p>
59
- <p>Descrição: Remove a elevação e adiciona uma borda fina ao cartão de entrada de texto</p>
60
-
61
- ### width
62
- <p>Tipo: <code>number | string</code></p>
63
- <p>Default: <code>''</code></p>
64
- <p>Descrição: Define a largura do componente</p>
65
-
66
- ### height
67
- <p>Tipo: <code>number | string</code></p>
68
- <p>Default: <code>''</code></p>
69
- <p>Descrição: Define a altura do componente</p>
70
-
71
- ## Eventos
72
- <p>Nome: <code>onKeyDown</code></p>
73
- <p><code>{ element, component, key, content }: IEventParam</code></p>
74
- <p>Descrição: Disparado quando uma tecla é digitada no editor</p>
1
+ # Componente Rich Text para Zeedhi
2
+ O componente de Rich Text é um editor de texto enriquecido com algumas funcionalidades.
3
+
4
+ ![Alt Text](https://i.ibb.co/wCyr6jC/zd-rich-text.png)
5
+
6
+ ## Instalação
7
+ <code>npm i @zeedhi/zd-richtext</code>
8
+ Com isso, dois pacotes serão instalados: o **@zeedhi/zd-richtext-common** e o **@zeedhi/zd-richtext-vue**.
9
+
10
+ Após a instalação, é necessário que você você importe o pacote **@zeedhi/zd-richtext-vue** dentro de seu arquivo de configuração <code>zeedhi.ts</code>
11
+ ```ts
12
+ import { ZdRichText } from '@zeedhi/zd-richtext';
13
+
14
+ Vue.component('ZdRichText', ZdRichText);
15
+ ```
16
+
17
+ Já o pacote **@zeedhi/zd-rich-text-common** deve ser importado no arquivo <code>controller</code> do componente.
18
+
19
+ ## Uso Básico
20
+ Para usar, defina a propriedade <code>component</code> como 'ZdRichText'.
21
+
22
+ ```json
23
+ {
24
+ "name": "rich-text-example",
25
+ "component": "ZdRichText"
26
+ }
27
+ ```
28
+
29
+ ## Propriedades
30
+
31
+ ### outputFormat
32
+ <p>Tipo: <code>string</code></p>
33
+ <p>Default: <code>json</code></p>
34
+ <p>Descrição: Define o formato de saída do conteúdo digitado ('json' ou 'html')</p>
35
+
36
+ ### placeholder
37
+ <p>Tipo: <code>string</code></p>
38
+ <p>Default: <code>''</code></p>
39
+ <p>Descrição: Texto mostrado enquanto o editor estiver sem conteúdo</p>
40
+
41
+ ### disabled
42
+ <p>Tipo: <code>boolean</code></p>
43
+ <p>Default: <code>false</code></p>
44
+ <p>Descrição: Desabilita o componente</p>
45
+
46
+ ### toolbarColor
47
+ <p>Tipo: <code>string</code></p>
48
+ <p>Default: <code>'#772583'</code></p>
49
+ <p>Descrição: Define a cor da barra de tarefas</p>
50
+
51
+ ### cardColor
52
+ <p>Tipo: <code>string</code></p>
53
+ <p>Default: <code>''</code></p>
54
+ <p>Descrição: Define a cor do cartão de entrada de texto</p>
55
+
56
+ ### outlined
57
+ <p>Tipo: <code>boolean</code></p>
58
+ <p>Default: <code>false</code></p>
59
+ <p>Descrição: Remove a elevação e adiciona uma borda fina ao cartão de entrada de texto</p>
60
+
61
+ ### width
62
+ <p>Tipo: <code>number | string</code></p>
63
+ <p>Default: <code>''</code></p>
64
+ <p>Descrição: Define a largura do componente</p>
65
+
66
+ ### height
67
+ <p>Tipo: <code>number | string</code></p>
68
+ <p>Default: <code>''</code></p>
69
+ <p>Descrição: Define a altura do componente</p>
70
+
71
+ ## Eventos
72
+ <p>Nome: <code>onKeyDown</code></p>
73
+ <p><code>{ element, component, key, content }: IEventParam</code></p>
74
+ <p>Descrição: Disparado quando uma tecla é digitada no editor</p>
package/dist/rich-text-vue.esm.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import { I18n, VersionService } from '@zeedhi/core';
2
2
  import { PropWatch, ZdComponentRender, setFillHeight, Vuetify } from '@zeedhi/vuetify';
3
+ import { locale, createVuetifyProTipTap, VuetifyTiptap } from '@zeedhi/zd-vuetify-pro-tiptap';
4
+ import '@zeedhi/zd-vuetify-pro-tiptap/lib/style.css';
3
5
  import Vue, { ref } from 'vue';
4
- import { locale, createVuetifyProTipTap, VuetifyTiptap } from 'vuetify-pro-tiptap';
5
- import 'vuetify-pro-tiptap/lib/style.css';
6
- import { FontFamily as FontFamily$1 } from '@tiptap/extension-font-family';
6
+ import { FontFamily as FontFamily$2 } from '@tiptap/extension-font-family';
7
7
  import { EditorContent } from '@tiptap/vue-2';
8
8
  import { RichText } from '@zeedhi/zd-richtext-common';
9
9
  import { Watch, Component as Component$1 } from 'vue-property-decorator';
@@ -35,13 +35,13 @@ function __metadata(metadataKey, metadataValue) {
35
35
  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
36
36
  }
37
37
 
38
- const fonts = [
38
+ const fonts$1 = [
39
39
  { font: 'Inter', title: 'Inter' },
40
40
  { font: 'Roboto', title: 'Roboto' },
41
41
  { font: 'serif', title: 'Serif' },
42
42
  { font: 'monospace', title: 'Monospace' },
43
43
  ];
44
- let FontFamily = class FontFamily extends ZdComponentRender {
44
+ let FontFamily$1 = class FontFamily extends ZdComponentRender {
45
45
  setFontStyle(editor, font) {
46
46
  editor.chain().focus().setFontFamily(font).run();
47
47
  }
@@ -49,25 +49,31 @@ let FontFamily = class FontFamily extends ZdComponentRender {
49
49
  __decorate([
50
50
  PropWatch({ type: Object, default: '' }),
51
51
  __metadata("design:type", Object)
52
- ], FontFamily.prototype, "editor", void 0);
52
+ ], FontFamily$1.prototype, "editor", void 0);
53
53
  __decorate([
54
54
  PropWatch({ type: Object, default: '' }),
55
55
  __metadata("design:type", Object)
56
- ], FontFamily.prototype, "attrs", void 0);
56
+ ], FontFamily$1.prototype, "attrs", void 0);
57
57
  __decorate([
58
- PropWatch({ type: Array, default: () => (fonts) }),
58
+ PropWatch({ type: Array, default: () => (fonts$1) }),
59
59
  __metadata("design:type", Array)
60
- ], FontFamily.prototype, "fonts", void 0);
61
- FontFamily = __decorate([
60
+ ], FontFamily$1.prototype, "fonts", void 0);
61
+ FontFamily$1 = __decorate([
62
62
  Component
63
- ], FontFamily);
64
- var script$1 = FontFamily;
63
+ ], FontFamily$1);
64
+
65
+ let installed = false;
66
+ const setInstalled = () => {
67
+ installed = true;
68
+ };
69
+ const getInstalled = () => installed;
65
70
 
66
71
  let ZdRichText = class ZdRichText extends ZdComponentRender {
67
72
  constructor() {
68
73
  super(...arguments);
69
74
  this.instanceType = RichText;
70
- this.extensions = [FontFamily$1];
75
+ this.isMounted = false;
76
+ this.extensions = [FontFamily$2];
71
77
  this.toolbar = ref([
72
78
  'bold',
73
79
  'italic',
@@ -96,7 +102,7 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
96
102
  // "outdent",
97
103
  '|',
98
104
  // "link",
99
- // "image",
105
+ 'image',
100
106
  // "video",
101
107
  // "table",
102
108
  // "blockquote",
@@ -111,6 +117,9 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
111
117
  // "redo",
112
118
  '#fontFamily',
113
119
  ]);
120
+ this.toolbarReadonly = ref([
121
+ // 'bold',
122
+ ]);
114
123
  }
115
124
  onKeyDown(event) {
116
125
  this.instance.onKeyDown(this.$el, event.key);
@@ -119,6 +128,9 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
119
128
  const newLanguage = I18n.instance.language.split('-')[0];
120
129
  locale.setLang(newLanguage);
121
130
  }
131
+ hasClass() {
132
+ return this.isMounted && this.$el.classList.contains('zd-form-child');
133
+ }
122
134
  input(instanceInput) {
123
135
  if (instanceInput) {
124
136
  this.instance.input(this.content);
@@ -134,6 +146,12 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
134
146
  this.instance.onChange(this.instance.content);
135
147
  }
136
148
  }
149
+ created() {
150
+ if (!getInstalled()) {
151
+ console.error('[ZdRichText]: A partir da versão 1.5.0 o componente ZdRichText deve ser instalado'
152
+ + ' usando o Vue.use() ao invés do Vue.component(). Veja a documentação para mais detalhes.');
153
+ }
154
+ }
137
155
  mounted() {
138
156
  var _a;
139
157
  if (this.$refs.tiptap.editor) {
@@ -142,11 +160,13 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
142
160
  this.$refs.tiptap.editor.on('focus', this.onFocus);
143
161
  this.$refs.tiptap.editor.on('blur', this.onBlur);
144
162
  }
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');
163
+ if (!this.readonly) {
164
+ const header = this.$el.querySelector('header.py-1.ps-1.vuetify-pro-tiptap-editor__toolbar.v-sheet.v-toolbar');
165
+ (_a = header) === null || _a === void 0 ? void 0 : _a.style.setProperty('background-color', this.toolbarColor || 'var(--v-primary-base)', 'important');
166
+ if (this.cardColor) {
167
+ const card = this.$el.querySelector('.vuetify-pro-tiptap-editor__content');
168
+ card.style.setProperty('background-color', this.cardColor, 'important');
169
+ }
150
170
  }
151
171
  this.changeLanguage();
152
172
  if (this.instance.fillHeight) {
@@ -154,12 +174,14 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
154
174
  }
155
175
  I18n.registerChangeListener(this.changeLanguage);
156
176
  this.setEditorDisabled();
177
+ this.isMounted = true;
157
178
  }
158
179
  // set tiptap editor as disabled
159
180
  setEditorDisabled() {
160
181
  const { editor } = this.$refs.tiptap;
182
+ const isEditable = !(this.instance.disabled || this.readonly);
161
183
  if (editor)
162
- editor.setOptions({ editable: !this.instance.disabled });
184
+ editor.setOptions({ editable: isEditable });
163
185
  }
164
186
  destroyed() {
165
187
  I18n.unregisterChangeListener(this.changeLanguage);
@@ -182,6 +204,10 @@ __decorate([
182
204
  }),
183
205
  __metadata("design:type", Object)
184
206
  ], ZdRichText.prototype, "disabled", void 0);
207
+ __decorate([
208
+ PropWatch({ type: Boolean, default: false }),
209
+ __metadata("design:type", Boolean)
210
+ ], ZdRichText.prototype, "readonly", void 0);
185
211
  __decorate([
186
212
  PropWatch({ type: String, default: undefined }),
187
213
  __metadata("design:type", String)
@@ -195,7 +221,7 @@ __decorate([
195
221
  __metadata("design:type", String)
196
222
  ], ZdRichText.prototype, "cardColor", void 0);
197
223
  __decorate([
198
- PropWatch({ type: Array, default: () => (fonts) }),
224
+ PropWatch({ type: Array, default: () => (fonts$1) }),
199
225
  __metadata("design:type", Array)
200
226
  ], ZdRichText.prototype, "fonts", void 0);
201
227
  __decorate([
@@ -226,6 +252,13 @@ __decorate([
226
252
  }),
227
253
  __metadata("design:type", Object)
228
254
  ], ZdRichText.prototype, "formatGetter", void 0);
255
+ __decorate([
256
+ PropWatch({
257
+ type: String,
258
+ default: '',
259
+ }),
260
+ __metadata("design:type", String)
261
+ ], ZdRichText.prototype, "value", void 0);
229
262
  __decorate([
230
263
  PropWatch({
231
264
  type: [Boolean, String],
@@ -244,7 +277,7 @@ ZdRichText = __decorate([
244
277
  components: { EditorContent },
245
278
  })
246
279
  ], ZdRichText);
247
- var script = ZdRichText;
280
+ var script$1 = ZdRichText;
248
281
 
249
282
  function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
250
283
  if (typeof shadowMode !== 'boolean') {
@@ -375,7 +408,7 @@ function addStyle(id, css) {
375
408
  }
376
409
 
377
410
  /* script */
378
- const __vue_script__$1 = script;
411
+ const __vue_script__$1 = script$1;
379
412
 
380
413
  /* template */
381
414
  var __vue_render__$1 = function () {
@@ -407,13 +440,18 @@ var __vue_render__$1 = function () {
407
440
  [
408
441
  _c("vuetify-tiptap", {
409
442
  ref: "tiptap",
443
+ class: [
444
+ { "zd-rich-text--disabled": _vm.instance.disabled },
445
+ _vm.readonly && !_vm.hasClass() && "zd-rich-text--readonly",
446
+ ],
410
447
  attrs: {
411
448
  markdownTheme: false,
412
449
  dark: _vm.instance.dark,
413
450
  disabled: _vm.instance.disabled,
451
+ readonly: _vm.instance.readonly,
414
452
  outlined: _vm.instance.outlined,
415
453
  placeholder: _vm.instance.placeholder,
416
- toolbar: _vm.toolbar,
454
+ toolbar: _vm.readonly ? _vm.toolbarReadonly : _vm.toolbar,
417
455
  rounded: "",
418
456
  "max-width": _vm.instance.width,
419
457
  extensions: _vm.extensions,
@@ -477,7 +515,7 @@ __vue_render__$1._withStripped = true;
477
515
  /* style */
478
516
  const __vue_inject_styles__$1 = function (inject) {
479
517
  if (!inject) return
480
- inject("data-v-122c064d_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 });
518
+ inject("data-v-90d68d34_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 });
481
519
 
482
520
  };
483
521
  /* scoped */
@@ -505,8 +543,36 @@ __vue_render__$1._withStripped = true;
505
543
  undefined
506
544
  );
507
545
 
546
+ const fonts = [
547
+ { font: 'Inter', title: 'Inter' },
548
+ { font: 'Roboto', title: 'Roboto' },
549
+ { font: 'serif', title: 'Serif' },
550
+ { font: 'monospace', title: 'Monospace' },
551
+ ];
552
+ let FontFamily = class FontFamily extends ZdComponentRender {
553
+ setFontStyle(editor, font) {
554
+ editor.chain().focus().setFontFamily(font).run();
555
+ }
556
+ };
557
+ __decorate([
558
+ PropWatch({ type: Object, default: '' }),
559
+ __metadata("design:type", Object)
560
+ ], FontFamily.prototype, "editor", void 0);
561
+ __decorate([
562
+ PropWatch({ type: Object, default: '' }),
563
+ __metadata("design:type", Object)
564
+ ], FontFamily.prototype, "attrs", void 0);
565
+ __decorate([
566
+ PropWatch({ type: Array, default: () => (fonts) }),
567
+ __metadata("design:type", Array)
568
+ ], FontFamily.prototype, "fonts", void 0);
569
+ FontFamily = __decorate([
570
+ Component
571
+ ], FontFamily);
572
+ var script = FontFamily;
573
+
508
574
  /* script */
509
- const __vue_script__ = script$1;
575
+ const __vue_script__ = script;
510
576
 
511
577
  /* template */
512
578
  var __vue_render__ = function () {
@@ -634,15 +700,27 @@ __vue_render__._withStripped = true;
634
700
  undefined
635
701
  );
636
702
 
637
- const vuetify = new Vuetify();
638
- const VuetifyProTipTap = createVuetifyProTipTap({
639
- vuetify,
640
- components: {
641
- VuetifyTiptap,
642
- FontFamily: __vue_component__,
643
- },
644
- });
645
- Vue.use(VuetifyProTipTap);
703
+ /**
704
+ * Function called when uploading an image to the editor
705
+ * it will read the file and return a base64 string
706
+ */
707
+ function upload(file) {
708
+ return new Promise((resolve) => {
709
+ const reader = new FileReader();
710
+ reader.onload = (event) => {
711
+ var _a;
712
+ if (typeof ((_a = event.target) === null || _a === void 0 ? void 0 : _a.result) === 'string') {
713
+ resolve(event.target.result);
714
+ }
715
+ else {
716
+ resolve('');
717
+ }
718
+ };
719
+ reader.onerror = () => resolve('');
720
+ reader.readAsDataURL(file);
721
+ });
722
+ }
723
+
646
724
  const packageContent = require('../package.json');
647
725
  VersionService.addPackageVersion(packageContent.name, packageContent.version);
648
726
  locale.setMessage('pt', {
@@ -786,6 +864,38 @@ locale.setMessage('es', {
786
864
  'editor.redo.tooltip': 'Rehacer',
787
865
  'editor.fullscreen.tooltip.fullscreen': 'Pantalla completa',
788
866
  'editor.fullscreen.tooltip.exit': 'Salir de pantalla completa',
789
- });
867
+ });
868
+ // install VuetifyProTipTap creating a new vuetify instance
869
+ // in case the user installs RichText using Vue.component()
870
+ const vuetify = new Vuetify();
871
+ const VuetifyProTipTap = createVuetifyProTipTap({
872
+ vuetify,
873
+ components: {
874
+ VuetifyTiptap,
875
+ FontFamily: __vue_component__,
876
+ },
877
+ });
878
+ Vue.use(VuetifyProTipTap);
879
+ // in case the user installs RichText using Vue.use()
880
+ // should install VuetifyProTipTap using the already existing vuetify instance
881
+ const RichTextPlugin = {
882
+ install(AppVue, options) {
883
+ setInstalled();
884
+ const ConfiguredTiptap = createVuetifyProTipTap({
885
+ vuetify: options.vuetify,
886
+ components: {
887
+ VuetifyTiptap,
888
+ FontFamily: __vue_component__,
889
+ },
890
+ config: {
891
+ image: {
892
+ upload,
893
+ },
894
+ },
895
+ });
896
+ AppVue.use(ConfiguredTiptap);
897
+ AppVue.component('ZdRichText', __vue_component__$1);
898
+ },
899
+ };
790
900
 
791
- export { __vue_component__$1 as ZdRichText };
901
+ export { RichTextPlugin, __vue_component__$1 as ZdRichText };
package/dist/rich-text-vue.umd.js CHANGED
@@ -1,8 +1,8 @@
1
1
  (function (global, factory) {
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';
2
+ 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')) :
3
+ 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) :
4
+ (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"]));
5
+ })(this, (function (exports, core, vuetify$1, zdVuetifyProTiptap, style_css, Vue, 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
 
@@ -35,13 +35,13 @@
35
35
  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
36
36
  }
37
37
 
38
- const fonts = [
38
+ const fonts$1 = [
39
39
  { font: 'Inter', title: 'Inter' },
40
40
  { font: 'Roboto', title: 'Roboto' },
41
41
  { font: 'serif', title: 'Serif' },
42
42
  { font: 'monospace', title: 'Monospace' },
43
43
  ];
44
- let FontFamily = class FontFamily extends vuetify$1.ZdComponentRender {
44
+ let FontFamily$1 = class FontFamily extends vuetify$1.ZdComponentRender {
45
45
  setFontStyle(editor, font) {
46
46
  editor.chain().focus().setFontFamily(font).run();
47
47
  }
@@ -49,24 +49,30 @@
49
49
  __decorate([
50
50
  vuetify$1.PropWatch({ type: Object, default: '' }),
51
51
  __metadata("design:type", Object)
52
- ], FontFamily.prototype, "editor", void 0);
52
+ ], FontFamily$1.prototype, "editor", void 0);
53
53
  __decorate([
54
54
  vuetify$1.PropWatch({ type: Object, default: '' }),
55
55
  __metadata("design:type", Object)
56
- ], FontFamily.prototype, "attrs", void 0);
56
+ ], FontFamily$1.prototype, "attrs", void 0);
57
57
  __decorate([
58
- vuetify$1.PropWatch({ type: Array, default: () => (fonts) }),
58
+ vuetify$1.PropWatch({ type: Array, default: () => (fonts$1) }),
59
59
  __metadata("design:type", Array)
60
- ], FontFamily.prototype, "fonts", void 0);
61
- FontFamily = __decorate([
60
+ ], FontFamily$1.prototype, "fonts", void 0);
61
+ FontFamily$1 = __decorate([
62
62
  Component__default["default"]
63
- ], FontFamily);
64
- var script$1 = FontFamily;
63
+ ], FontFamily$1);
64
+
65
+ let installed = false;
66
+ const setInstalled = () => {
67
+ installed = true;
68
+ };
69
+ const getInstalled = () => installed;
65
70
 
66
71
  let ZdRichText = class ZdRichText extends vuetify$1.ZdComponentRender {
67
72
  constructor() {
68
73
  super(...arguments);
69
74
  this.instanceType = zdRichtextCommon.RichText;
75
+ this.isMounted = false;
70
76
  this.extensions = [extensionFontFamily.FontFamily];
71
77
  this.toolbar = Vue.ref([
72
78
  'bold',
@@ -96,7 +102,7 @@
96
102
  // "outdent",
97
103
  '|',
98
104
  // "link",
99
- // "image",
105
+ 'image',
100
106
  // "video",
101
107
  // "table",
102
108
  // "blockquote",
@@ -111,13 +117,19 @@
111
117
  // "redo",
112
118
  '#fontFamily',
113
119
  ]);
120
+ this.toolbarReadonly = Vue.ref([
121
+ // 'bold',
122
+ ]);
114
123
  }
115
124
  onKeyDown(event) {
116
125
  this.instance.onKeyDown(this.$el, event.key);
117
126
  }
118
127
  changeLanguage() {
119
128
  const newLanguage = core.I18n.instance.language.split('-')[0];
120
- vuetifyProTiptap.locale.setLang(newLanguage);
129
+ zdVuetifyProTiptap.locale.setLang(newLanguage);
130
+ }
131
+ hasClass() {
132
+ return this.isMounted && this.$el.classList.contains('zd-form-child');
121
133
  }
122
134
  input(instanceInput) {
123
135
  if (instanceInput) {
@@ -134,6 +146,12 @@
134
146
  this.instance.onChange(this.instance.content);
135
147
  }
136
148
  }
149
+ created() {
150
+ if (!getInstalled()) {
151
+ console.error('[ZdRichText]: A partir da versão 1.5.0 o componente ZdRichText deve ser instalado'
152
+ + ' usando o Vue.use() ao invés do Vue.component(). Veja a documentação para mais detalhes.');
153
+ }
154
+ }
137
155
  mounted() {
138
156
  var _a;
139
157
  if (this.$refs.tiptap.editor) {
@@ -142,11 +160,13 @@
142
160
  this.$refs.tiptap.editor.on('focus', this.onFocus);
143
161
  this.$refs.tiptap.editor.on('blur', this.onBlur);
144
162
  }
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');
163
+ if (!this.readonly) {
164
+ const header = this.$el.querySelector('header.py-1.ps-1.vuetify-pro-tiptap-editor__toolbar.v-sheet.v-toolbar');
165
+ (_a = header) === null || _a === void 0 ? void 0 : _a.style.setProperty('background-color', this.toolbarColor || 'var(--v-primary-base)', 'important');
166
+ if (this.cardColor) {
167
+ const card = this.$el.querySelector('.vuetify-pro-tiptap-editor__content');
168
+ card.style.setProperty('background-color', this.cardColor, 'important');
169
+ }
150
170
  }
151
171
  this.changeLanguage();
152
172
  if (this.instance.fillHeight) {
@@ -154,12 +174,14 @@
154
174
  }
155
175
  core.I18n.registerChangeListener(this.changeLanguage);
156
176
  this.setEditorDisabled();
177
+ this.isMounted = true;
157
178
  }
158
179
  // set tiptap editor as disabled
159
180
  setEditorDisabled() {
160
181
  const { editor } = this.$refs.tiptap;
182
+ const isEditable = !(this.instance.disabled || this.readonly);
161
183
  if (editor)
162
- editor.setOptions({ editable: !this.instance.disabled });
184
+ editor.setOptions({ editable: isEditable });
163
185
  }
164
186
  destroyed() {
165
187
  core.I18n.unregisterChangeListener(this.changeLanguage);
@@ -182,6 +204,10 @@
182
204
  }),
183
205
  __metadata("design:type", Object)
184
206
  ], ZdRichText.prototype, "disabled", void 0);
207
+ __decorate([
208
+ vuetify$1.PropWatch({ type: Boolean, default: false }),
209
+ __metadata("design:type", Boolean)
210
+ ], ZdRichText.prototype, "readonly", void 0);
185
211
  __decorate([
186
212
  vuetify$1.PropWatch({ type: String, default: undefined }),
187
213
  __metadata("design:type", String)
@@ -195,7 +221,7 @@
195
221
  __metadata("design:type", String)
196
222
  ], ZdRichText.prototype, "cardColor", void 0);
197
223
  __decorate([
198
- vuetify$1.PropWatch({ type: Array, default: () => (fonts) }),
224
+ vuetify$1.PropWatch({ type: Array, default: () => (fonts$1) }),
199
225
  __metadata("design:type", Array)
200
226
  ], ZdRichText.prototype, "fonts", void 0);
201
227
  __decorate([
@@ -226,6 +252,13 @@
226
252
  }),
227
253
  __metadata("design:type", Object)
228
254
  ], ZdRichText.prototype, "formatGetter", void 0);
255
+ __decorate([
256
+ vuetify$1.PropWatch({
257
+ type: String,
258
+ default: '',
259
+ }),
260
+ __metadata("design:type", String)
261
+ ], ZdRichText.prototype, "value", void 0);
229
262
  __decorate([
230
263
  vuetify$1.PropWatch({
231
264
  type: [Boolean, String],
@@ -244,7 +277,7 @@
244
277
  components: { EditorContent: vue2.EditorContent },
245
278
  })
246
279
  ], ZdRichText);
247
- var script = ZdRichText;
280
+ var script$1 = ZdRichText;
248
281
 
249
282
  function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
250
283
  if (typeof shadowMode !== 'boolean') {
@@ -375,7 +408,7 @@
375
408
  }
376
409
 
377
410
  /* script */
378
- const __vue_script__$1 = script;
411
+ const __vue_script__$1 = script$1;
379
412
 
380
413
  /* template */
381
414
  var __vue_render__$1 = function () {
@@ -407,13 +440,18 @@
407
440
  [
408
441
  _c("vuetify-tiptap", {
409
442
  ref: "tiptap",
443
+ class: [
444
+ { "zd-rich-text--disabled": _vm.instance.disabled },
445
+ _vm.readonly && !_vm.hasClass() && "zd-rich-text--readonly",
446
+ ],
410
447
  attrs: {
411
448
  markdownTheme: false,
412
449
  dark: _vm.instance.dark,
413
450
  disabled: _vm.instance.disabled,
451
+ readonly: _vm.instance.readonly,
414
452
  outlined: _vm.instance.outlined,
415
453
  placeholder: _vm.instance.placeholder,
416
- toolbar: _vm.toolbar,
454
+ toolbar: _vm.readonly ? _vm.toolbarReadonly : _vm.toolbar,
417
455
  rounded: "",
418
456
  "max-width": _vm.instance.width,
419
457
  extensions: _vm.extensions,
@@ -477,7 +515,7 @@
477
515
  /* style */
478
516
  const __vue_inject_styles__$1 = function (inject) {
479
517
  if (!inject) return
480
- inject("data-v-122c064d_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 });
518
+ inject("data-v-90d68d34_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 });
481
519
 
482
520
  };
483
521
  /* scoped */
@@ -505,8 +543,36 @@
505
543
  undefined
506
544
  );
507
545
 
546
+ const fonts = [
547
+ { font: 'Inter', title: 'Inter' },
548
+ { font: 'Roboto', title: 'Roboto' },
549
+ { font: 'serif', title: 'Serif' },
550
+ { font: 'monospace', title: 'Monospace' },
551
+ ];
552
+ let FontFamily = class FontFamily extends vuetify$1.ZdComponentRender {
553
+ setFontStyle(editor, font) {
554
+ editor.chain().focus().setFontFamily(font).run();
555
+ }
556
+ };
557
+ __decorate([
558
+ vuetify$1.PropWatch({ type: Object, default: '' }),
559
+ __metadata("design:type", Object)
560
+ ], FontFamily.prototype, "editor", void 0);
561
+ __decorate([
562
+ vuetify$1.PropWatch({ type: Object, default: '' }),
563
+ __metadata("design:type", Object)
564
+ ], FontFamily.prototype, "attrs", void 0);
565
+ __decorate([
566
+ vuetify$1.PropWatch({ type: Array, default: () => (fonts) }),
567
+ __metadata("design:type", Array)
568
+ ], FontFamily.prototype, "fonts", void 0);
569
+ FontFamily = __decorate([
570
+ Component__default["default"]
571
+ ], FontFamily);
572
+ var script = FontFamily;
573
+
508
574
  /* script */
509
- const __vue_script__ = script$1;
575
+ const __vue_script__ = script;
510
576
 
511
577
  /* template */
512
578
  var __vue_render__ = function () {
@@ -634,18 +700,30 @@
634
700
  undefined
635
701
  );
636
702
 
637
- const vuetify = new vuetify$1.Vuetify();
638
- const VuetifyProTipTap = vuetifyProTiptap.createVuetifyProTipTap({
639
- vuetify,
640
- components: {
641
- VuetifyTiptap: vuetifyProTiptap.VuetifyTiptap,
642
- FontFamily: __vue_component__,
643
- },
644
- });
645
- Vue__default["default"].use(VuetifyProTipTap);
703
+ /**
704
+ * Function called when uploading an image to the editor
705
+ * it will read the file and return a base64 string
706
+ */
707
+ function upload(file) {
708
+ return new Promise((resolve) => {
709
+ const reader = new FileReader();
710
+ reader.onload = (event) => {
711
+ var _a;
712
+ if (typeof ((_a = event.target) === null || _a === void 0 ? void 0 : _a.result) === 'string') {
713
+ resolve(event.target.result);
714
+ }
715
+ else {
716
+ resolve('');
717
+ }
718
+ };
719
+ reader.onerror = () => resolve('');
720
+ reader.readAsDataURL(file);
721
+ });
722
+ }
723
+
646
724
  const packageContent = require('../package.json');
647
725
  core.VersionService.addPackageVersion(packageContent.name, packageContent.version);
648
- vuetifyProTiptap.locale.setMessage('pt', {
726
+ zdVuetifyProTiptap.locale.setMessage('pt', {
649
727
  'editor.words': 'PALAVRAS',
650
728
  'editor.characters': 'CARACTERES',
651
729
  'editor.bold.tooltip': 'Negrito',
@@ -716,7 +794,7 @@
716
794
  'editor.fullscreen.tooltip.fullscreen': 'Tela Cheia',
717
795
  'editor.fullscreen.tooltip.exit': 'Sair da Tela Cheia',
718
796
  });
719
- vuetifyProTiptap.locale.setMessage('es', {
797
+ zdVuetifyProTiptap.locale.setMessage('es', {
720
798
  'editor.words': 'PALABRAS',
721
799
  'editor.characters': 'CARACTERES',
722
800
  'editor.bold.tooltip': 'Negrita',
@@ -786,8 +864,41 @@
786
864
  'editor.redo.tooltip': 'Rehacer',
787
865
  'editor.fullscreen.tooltip.fullscreen': 'Pantalla completa',
788
866
  'editor.fullscreen.tooltip.exit': 'Salir de pantalla completa',
789
- });
867
+ });
868
+ // install VuetifyProTipTap creating a new vuetify instance
869
+ // in case the user installs RichText using Vue.component()
870
+ const vuetify = new vuetify$1.Vuetify();
871
+ const VuetifyProTipTap = zdVuetifyProTiptap.createVuetifyProTipTap({
872
+ vuetify,
873
+ components: {
874
+ VuetifyTiptap: zdVuetifyProTiptap.VuetifyTiptap,
875
+ FontFamily: __vue_component__,
876
+ },
877
+ });
878
+ Vue__default["default"].use(VuetifyProTipTap);
879
+ // in case the user installs RichText using Vue.use()
880
+ // should install VuetifyProTipTap using the already existing vuetify instance
881
+ const RichTextPlugin = {
882
+ install(AppVue, options) {
883
+ setInstalled();
884
+ const ConfiguredTiptap = zdVuetifyProTiptap.createVuetifyProTipTap({
885
+ vuetify: options.vuetify,
886
+ components: {
887
+ VuetifyTiptap: zdVuetifyProTiptap.VuetifyTiptap,
888
+ FontFamily: __vue_component__,
889
+ },
890
+ config: {
891
+ image: {
892
+ upload,
893
+ },
894
+ },
895
+ });
896
+ AppVue.use(ConfiguredTiptap);
897
+ AppVue.component('ZdRichText', __vue_component__$1);
898
+ },
899
+ };
790
900
 
901
+ exports.RichTextPlugin = RichTextPlugin;
791
902
  exports.ZdRichText = __vue_component__$1;
792
903
 
793
904
  Object.defineProperty(exports, '__esModule', { value: true });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zeedhi/zd-richtext-vue",
3
- "version": "1.4.2",
3
+ "version": "1.5.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",
@@ -20,9 +20,9 @@
20
20
  "@tiptap/pm": "^2.1.12",
21
21
  "@tiptap/starter-kit": "^2.1.12",
22
22
  "@tiptap/vue-2": "^2.1.12",
23
+ "@zeedhi/zd-vuetify-pro-tiptap": "1.0.*",
23
24
  "tiptap-extensions": "1.35.*",
24
- "tiptap-vuetify": "2.24.*",
25
- "vuetify-pro-tiptap": "^1.4.3"
25
+ "tiptap-vuetify": "2.24.*"
26
26
  },
27
27
  "peerDependencies": {
28
28
  "@zeedhi/vuetify": "^1.74.0",
@@ -31,5 +31,5 @@
31
31
  "vue-class-component": "7.2.*",
32
32
  "vue-property-decorator": "9.1.*"
33
33
  },
34
- "gitHead": "b13fac05395351ba466cc003ab891fd3cbeecd09"
34
+ "gitHead": "92f5ac1c3c2438c8c5053154993c204a51de59a0"
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[]>;
31
+ created(): void;
26
32
  mounted(): void;
27
33
  setEditorDisabled(): void;
28
34
  destroyed(): void;
package/types/index.d.ts CHANGED
@@ -1,3 +1,11 @@
1
- import 'vuetify-pro-tiptap/lib/style.css';
1
+ import { Vuetify } from '@zeedhi/vuetify';
2
+ import '@zeedhi/zd-vuetify-pro-tiptap/lib/style.css';
3
+ import type { VueConstructor } from 'vue';
2
4
  import ZdRichText from './RichText.vue';
3
- export { ZdRichText };
5
+ declare const vuetify: any;
6
+ declare const RichTextPlugin: {
7
+ install(AppVue: VueConstructor, options: {
8
+ vuetify: Vuetify;
9
+ }): void;
10
+ };
11
+ export { ZdRichText, RichTextPlugin };
package/types/utils/check-install.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ declare const setInstalled: () => void;
2
+ declare const getInstalled: () => boolean;
3
+ export { setInstalled, getInstalled };
package/types/utils/upload.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ /**
2
+ * Function called when uploading an image to the editor
3
+ * it will read the file and return a base64 string
4
+ */
5
+ export default function upload(file: File): Promise<string>;