@zeedhi/zd-richtext-vue 1.3.0 → 1.3.2

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.
@@ -1,9 +1,11 @@
1
1
  import Vue from 'vue';
2
- import { VersionService } from '@zeedhi/core';
2
+ import { I18n, VersionService } from '@zeedhi/core';
3
3
  import { PropWatch, ZdComponentRender, setFillHeight, Vuetify } from '@zeedhi/vuetify';
4
+ import { locale, createVuetifyProTipTap, VuetifyTiptap } from 'vuetify-pro-tiptap';
4
5
  import { Component } from 'vue-property-decorator';
5
6
  import { RichText } from '@zeedhi/zd-richtext-common';
6
- import 'tiptap-vuetify/dist/main.css';
7
+ import { EditorContent } from '@tiptap/vue-2';
8
+ import 'vuetify-pro-tiptap/lib/style.css';
7
9
 
8
10
  /*! *****************************************************************************
9
11
  Copyright (c) Microsoft Corporation.
@@ -31,42 +33,77 @@ function __metadata(metadataKey, metadataValue) {
31
33
  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
32
34
  }
33
35
 
34
- const { Bold, Italic, Strike, Underline, Code, ListItem, BulletList, OrderedList, HorizontalRule, Heading, } = require('tiptap-vuetify');
35
36
  let ZdRichText = class ZdRichText extends ZdComponentRender {
36
37
  constructor() {
37
38
  super(...arguments);
38
- this.extensions = [
39
- Bold,
40
- Italic,
41
- Strike,
42
- Underline,
43
- [
44
- Heading,
45
- {
46
- options: {
47
- levels: [1, 2, 3],
48
- },
49
- },
50
- ],
51
- Code,
52
- HorizontalRule,
53
- ListItem,
54
- BulletList,
55
- OrderedList,
56
- ];
57
39
  this.instanceType = RichText;
40
+ this.toolbar = [
41
+ 'bold',
42
+ 'italic',
43
+ 'underline',
44
+ 'strike',
45
+ 'color',
46
+ // "highlight",
47
+ '|',
48
+ 'h1',
49
+ 'h2',
50
+ 'h3',
51
+ 'h4',
52
+ 'h5',
53
+ // "h6",
54
+ // "p",
55
+ '|',
56
+ 'left',
57
+ 'center',
58
+ 'right',
59
+ 'justify',
60
+ '|',
61
+ 'bulletList',
62
+ 'orderedList',
63
+ // "taskList",
64
+ // "indent",
65
+ // "outdent",
66
+ '|',
67
+ // "link",
68
+ // "image",
69
+ // "video",
70
+ // "table",
71
+ // "blockquote",
72
+ 'rule',
73
+ 'code',
74
+ ];
58
75
  }
59
76
  onKeyDown(event) {
60
77
  this.instance.onKeyDown(this.$el, event.key);
61
78
  }
79
+ changeLanguage() {
80
+ const newLanguage = I18n.instance.language.split('-')[0];
81
+ locale.setLang(newLanguage);
82
+ }
62
83
  mounted() {
84
+ var _a;
85
+ if (this.$refs.tiptap.editor) {
86
+ this.instance.formatGetter.html = this.$refs.tiptap.editor.getHTML.bind(this.$refs.tiptap.editor);
87
+ this.instance.formatGetter.json = this.$refs.tiptap.editor.getJSON.bind(this.$refs.tiptap.editor);
88
+ }
89
+ const header = this.$el.querySelector('header.py-1.ps-1.vuetify-pro-tiptap-editor__toolbar.v-sheet.v-toolbar');
90
+ (_a = header) === null || _a === void 0 ? void 0 : _a.style.setProperty('background-color', this.toolbarColor || 'var(--v-primary-base)', 'important');
91
+ if (this.cardColor) {
92
+ const card = this.$el.querySelector('.vuetify-pro-tiptap-editor__content');
93
+ card.style.setProperty('background-color', this.cardColor, 'important');
94
+ }
95
+ this.changeLanguage();
63
96
  if (this.instance.fillHeight) {
64
97
  setFillHeight(this.$el);
65
98
  }
99
+ I18n.registerChangeListener(this.changeLanguage);
100
+ }
101
+ destroyed() {
102
+ I18n.unregisterChangeListener(this.changeLanguage);
66
103
  }
67
104
  };
68
105
  __decorate([
69
- PropWatch({ type: String, default: 'json' }),
106
+ PropWatch({ type: String, default: 'html' }),
70
107
  __metadata("design:type", String)
71
108
  ], ZdRichText.prototype, "outputFormat", void 0);
72
109
  __decorate([
@@ -84,6 +121,10 @@ __decorate([
84
121
  PropWatch({ type: String, default: undefined }),
85
122
  __metadata("design:type", String)
86
123
  ], ZdRichText.prototype, "toolbarColor", void 0);
124
+ __decorate([
125
+ PropWatch({ type: String, default: '' }),
126
+ __metadata("design:type", String)
127
+ ], ZdRichText.prototype, "content", void 0);
87
128
  __decorate([
88
129
  PropWatch({ type: String, default: '' }),
89
130
  __metadata("design:type", String)
@@ -109,6 +150,13 @@ __decorate([
109
150
  }),
110
151
  __metadata("design:type", Object)
111
152
  ], ZdRichText.prototype, "height", void 0);
153
+ __decorate([
154
+ PropWatch({
155
+ type: [Object],
156
+ default: () => { },
157
+ }),
158
+ __metadata("design:type", Object)
159
+ ], ZdRichText.prototype, "formatGetter", void 0);
112
160
  __decorate([
113
161
  PropWatch({
114
162
  type: [Boolean, String],
@@ -117,7 +165,9 @@ __decorate([
117
165
  __metadata("design:type", Boolean)
118
166
  ], ZdRichText.prototype, "fillHeight", void 0);
119
167
  ZdRichText = __decorate([
120
- Component
168
+ Component({
169
+ components: { EditorContent },
170
+ })
121
171
  ], ZdRichText);
122
172
  var script = ZdRichText;
123
173
 
@@ -268,40 +318,54 @@ var __vue_render__ = function () {
268
318
  expression: "instance.isVisible",
269
319
  },
270
320
  ],
271
- class: ["zd-rich-text", _vm.instance.cssClass],
321
+ class: ["zd-rich-text", "zd-elevation-2", _vm.instance.cssClass],
272
322
  style: {
273
323
  height: _vm.$formatSize(_vm.instance.height),
274
324
  },
275
325
  attrs: { id: _vm.instance.name, name: _vm.instance.name },
326
+ on: {
327
+ keydown: function ($event) {
328
+ return _vm.onKeyDown($event)
329
+ },
330
+ },
276
331
  },
277
332
  [
278
- _c("tiptap-vuetify", {
333
+ _c("vuetify-tiptap", {
334
+ ref: "tiptap",
279
335
  attrs: {
280
- "output-format": _vm.instance.outputFormat,
281
- extensions: _vm.extensions,
282
- "toolbar-attributes": {
283
- color: _vm.instance.toolbarColor,
284
- class: "zd-rich-text-header rounded-t",
285
- width: _vm.instance.width,
286
- },
287
- "card-props": {
288
- color: _vm.instance.cardColor,
289
- class: "zd-rich-text-content rounded-b-md",
290
- outlined: _vm.instance.outlined,
291
- width: _vm.instance.width,
292
- height: "100%",
293
- style: _vm.instance.cssStyle,
294
- dark: _vm.instance.dark,
295
- light: _vm.instance.light,
296
- },
297
- placeholder: _vm.instance.placeholder,
336
+ markdownTheme: false,
337
+ dark: _vm.instance.dark,
298
338
  disabled: _vm.instance.disabled,
339
+ outlined: _vm.instance.outlined,
340
+ placeholder: _vm.instance.placeholder,
341
+ toolbar: _vm.toolbar,
342
+ rounded: "",
343
+ "max-width": _vm.instance.width,
299
344
  },
300
- on: {
301
- keydown: function ($event) {
302
- return _vm.onKeyDown($event)
345
+ scopedSlots: _vm._u([
346
+ {
347
+ key: "editor",
348
+ fn: function (ref) {
349
+ var editor = ref.editor;
350
+ var attrs = ref.attrs;
351
+ return [
352
+ _c("editor-content", {
353
+ staticClass:
354
+ "vuetify-pro-tiptap-editor__content zd-rich-text-content markdown-theme-github",
355
+ class: [{ __dark: attrs.isDark }, attrs.editorClass],
356
+ style: attrs.contentDynamicStyles,
357
+ attrs: { editor: editor, "data-testid": "value" },
358
+ }),
359
+ ]
360
+ },
303
361
  },
304
- },
362
+ {
363
+ key: "bottom",
364
+ fn: function (ref) {
365
+ return [_c("span")]
366
+ },
367
+ },
368
+ ]),
305
369
  model: {
306
370
  value: _vm.instance.content,
307
371
  callback: function ($$v) {
@@ -320,7 +384,7 @@ __vue_render__._withStripped = true;
320
384
  /* style */
321
385
  const __vue_inject_styles__ = function (inject) {
322
386
  if (!inject) return
323
- inject("data-v-607b4853_0", { source: ".zd-rich-text button.v-btn {\n color: #ffffff !important;\n}\n.zd-rich-text-content.theme--dark {\n background-color: #383838;\n}\n.zd-rich-text .tiptap-vuetify-editor {\n height: 100%;\n}\n.zd-rich-text div.v-card {\n display: flex;\n flex-direction: column;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__toolbar {\n display: flex;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__toolbar header {\n background-color: var(--v-primary-base);\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__content {\n flex-grow: 1;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__content .ProseMirror {\n margin: var(--spacing-2) !important;\n height: 100%;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__content .ProseMirror p {\n margin-top: var(--spacing-2) !important;\n margin-bottom: var(--spacing-2) !important;\n}", map: undefined, media: undefined });
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 });
324
388
 
325
389
  };
326
390
  /* scoped */
@@ -348,14 +412,157 @@ __vue_render__._withStripped = true;
348
412
  undefined
349
413
  );
350
414
 
351
- const TiptapVuetify = require('tiptap-vuetify');
352
- // tiptap-vuetify
353
- Vue.use(TiptapVuetify.TiptapVuetifyPlugin, {
354
- vuetify: new Vuetify(),
355
- iconsGroup: 'mdi',
415
+ const vuetify = new Vuetify();
416
+ const VuetifyProTipTap = createVuetifyProTipTap({
417
+ vuetify,
418
+ components: {
419
+ VuetifyTiptap,
420
+ },
356
421
  });
357
- Vue.component('tiptap-vuetify', TiptapVuetify.TiptapVuetify);
422
+ Vue.use(VuetifyProTipTap);
358
423
  const packageContent = require('../package.json');
359
- VersionService.addPackageVersion(packageContent.name, packageContent.version);
424
+ VersionService.addPackageVersion(packageContent.name, packageContent.version);
425
+ locale.setMessage('pt', {
426
+ 'editor.words': 'PALAVRAS',
427
+ 'editor.characters': 'CARACTERES',
428
+ 'editor.bold.tooltip': 'Negrito',
429
+ 'editor.italic.tooltip': 'Itálico',
430
+ 'editor.underline.tooltip': 'Sublinhado',
431
+ 'editor.strike.tooltip': 'Riscado',
432
+ 'editor.color.tooltip': 'Cor',
433
+ 'editor.highlight.tooltip': 'Realçar',
434
+ 'editor.heading.h1.tooltip': 'Título 1',
435
+ 'editor.heading.h2.tooltip': 'Título 2',
436
+ 'editor.heading.h3.tooltip': 'Título 3',
437
+ 'editor.heading.h4.tooltip': 'Título 4',
438
+ 'editor.heading.h5.tooltip': 'Título 5',
439
+ 'editor.heading.h6.tooltip': 'Título 6',
440
+ 'editor.paragraph.tooltip': 'Parágrafo',
441
+ 'editor.left.tooltip': 'Alinhar à Esquerda',
442
+ 'editor.center.tooltip': 'Centralizar',
443
+ 'editor.right.tooltip': 'Alinhar à Direita',
444
+ 'editor.justify.tooltip': 'Justificar',
445
+ 'editor.bulletlist.tooltip': 'Lista com Marcadores',
446
+ 'editor.orderedlist.tooltip': 'Lista Numerada',
447
+ 'editor.tasklist.tooltip': 'Lista de Tarefas',
448
+ 'editor.indent.tooltip': 'Recuar',
449
+ 'editor.outdent.tooltip': 'Recuar Menos',
450
+ 'editor.link.tooltip': 'Link',
451
+ 'editor.link.dialog.title': 'Inserir link',
452
+ 'editor.link.dialog.link': 'link',
453
+ 'editor.link.dialog.button.apply': 'aplicar',
454
+ 'editor.image.tooltip': 'Imagem',
455
+ 'editor.image.float.left.tooltip': 'Flutuar à Esquerda',
456
+ 'editor.image.float.none.tooltip': 'Sem Flutuação',
457
+ 'editor.image.float.right.tooltip': 'Flutuar à Direita',
458
+ 'editor.image.size.small.tooltip': 'Pequeno',
459
+ 'editor.image.size.medium.tooltip': 'Médio',
460
+ 'editor.image.size.large.tooltip': 'Grande',
461
+ 'editor.image.remove.tooltip': 'Remover',
462
+ 'editor.image.dialog.title': 'Inserir imagem',
463
+ 'editor.image.dialog.tab.url': 'URL',
464
+ 'editor.image.dialog.tab.upload': 'Upload',
465
+ 'editor.image.dialog.form.link': 'Link',
466
+ 'editor.image.dialog.form.alt': 'Alt',
467
+ 'editor.image.dialog.form.aspectRatio': 'Manter Proporções Originais',
468
+ 'editor.image.dialog.form.file': 'Arquivo',
469
+ 'editor.image.dialog.button.apply': 'aplicar',
470
+ 'editor.video.tooltip': 'Vídeo',
471
+ 'editor.video.dialog.title': 'Inserir vídeo',
472
+ 'editor.video.dialog.link': 'link',
473
+ 'editor.video.dialog.button.apply': 'aplicar',
474
+ 'editor.video.remove.tooltip': 'Remover',
475
+ 'editor.table.tooltip': 'Tabela',
476
+ 'editor.table.menu.insert_table': 'Inserir Tabela',
477
+ 'editor.table.menu.insert_table.with_header_row': 'Com Linha de Cabeçalho',
478
+ 'editor.table.menu.add_column_before': 'Adicionar Coluna Antes',
479
+ 'editor.table.menu.add_column_after': 'Adicionar Coluna Depois',
480
+ 'editor.table.menu.delete_column': 'Excluir Coluna',
481
+ 'editor.table.menu.add_row_before': 'Adicionar Linha Antes',
482
+ 'editor.table.menu.add_row_after': 'Adicionar Linha Depois',
483
+ 'editor.table.menu.delete_row': 'Excluir Linha',
484
+ 'editor.table.menu.merge_or_split_cells': 'Mesclar ou Dividir Células',
485
+ 'editor.table.menu.delete_table': 'Excluir Tabela',
486
+ 'editor.blockquote.tooltip': 'Citação',
487
+ 'editor.horizontalrule.tooltip': 'Linha Horizontal',
488
+ 'editor.code.tooltip': 'Código',
489
+ 'editor.codeblock.tooltip': 'Bloco de Código',
490
+ 'editor.clear.tooltip': 'Limpar Formatação',
491
+ 'editor.undo.tooltip': 'Desfazer',
492
+ 'editor.redo.tooltip': 'Refazer',
493
+ 'editor.fullscreen.tooltip.fullscreen': 'Tela Cheia',
494
+ 'editor.fullscreen.tooltip.exit': 'Sair da Tela Cheia',
495
+ });
496
+ locale.setMessage('es', {
497
+ 'editor.words': 'PALABRAS',
498
+ 'editor.characters': 'CARACTERES',
499
+ 'editor.bold.tooltip': 'Negrita',
500
+ 'editor.italic.tooltip': 'Cursiva',
501
+ 'editor.underline.tooltip': 'Subrayado',
502
+ 'editor.strike.tooltip': 'Tachado',
503
+ 'editor.color.tooltip': 'Color',
504
+ 'editor.highlight.tooltip': 'Resaltar',
505
+ 'editor.heading.h1.tooltip': 'Encabezado 1',
506
+ 'editor.heading.h2.tooltip': 'Encabezado 2',
507
+ 'editor.heading.h3.tooltip': 'Encabezado 3',
508
+ 'editor.heading.h4.tooltip': 'Encabezado 4',
509
+ 'editor.heading.h5.tooltip': 'Encabezado 5',
510
+ 'editor.heading.h6.tooltip': 'Encabezado 6',
511
+ 'editor.paragraph.tooltip': 'Párrafo',
512
+ 'editor.left.tooltip': 'Alinear a la Izquierda',
513
+ 'editor.center.tooltip': 'Centrar',
514
+ 'editor.right.tooltip': 'Alinear a la Derecha',
515
+ 'editor.justify.tooltip': 'Justificar',
516
+ 'editor.bulletlist.tooltip': 'Lista con Viñetas',
517
+ 'editor.orderedlist.tooltip': 'Lista Numerada',
518
+ 'editor.tasklist.tooltip': 'Lista de Tareas',
519
+ 'editor.indent.tooltip': 'Sangrar',
520
+ 'editor.outdent.tooltip': 'Reducir Sangría',
521
+ 'editor.link.tooltip': 'Enlace',
522
+ 'editor.link.dialog.title': 'Insertar enlace',
523
+ 'editor.link.dialog.link': 'enlace',
524
+ 'editor.link.dialog.button.apply': 'aplicar',
525
+ 'editor.image.tooltip': 'Imagen',
526
+ 'editor.image.float.left.tooltip': 'Alinear a la Izquierda',
527
+ 'editor.image.float.none.tooltip': 'Sin Alineación',
528
+ 'editor.image.float.right.tooltip': 'Alinear a la Derecha',
529
+ 'editor.image.size.small.tooltip': 'Pequeño',
530
+ 'editor.image.size.medium.tooltip': 'Mediano',
531
+ 'editor.image.size.large.tooltip': 'Grande',
532
+ 'editor.image.remove.tooltip': 'Eliminar',
533
+ 'editor.image.dialog.title': 'Insertar imagen',
534
+ 'editor.image.dialog.tab.url': 'URL',
535
+ 'editor.image.dialog.tab.upload': 'Subir',
536
+ 'editor.image.dialog.form.link': 'Enlace',
537
+ 'editor.image.dialog.form.alt': 'Texto Alternativo',
538
+ 'editor.image.dialog.form.aspectRatio': 'Mantener proporciones originales',
539
+ 'editor.image.dialog.form.file': 'Archivo',
540
+ 'editor.image.dialog.button.apply': 'aplicar',
541
+ 'editor.video.tooltip': 'Video',
542
+ 'editor.video.dialog.title': 'Insertar video',
543
+ 'editor.video.dialog.link': 'enlace',
544
+ 'editor.video.dialog.button.apply': 'aplicar',
545
+ 'editor.video.remove.tooltip': 'Eliminar',
546
+ 'editor.table.tooltip': 'Tabla',
547
+ 'editor.table.menu.insert_table': 'Insertar tabla',
548
+ 'editor.table.menu.insert_table.with_header_row': 'Con fila de encabezado',
549
+ 'editor.table.menu.add_column_before': 'Agregar columna antes',
550
+ 'editor.table.menu.add_column_after': 'Agregar columna después',
551
+ 'editor.table.menu.delete_column': 'Eliminar columna',
552
+ 'editor.table.menu.add_row_before': 'Agregar fila antes',
553
+ 'editor.table.menu.add_row_after': 'Agregar fila después',
554
+ 'editor.table.menu.delete_row': 'Eliminar fila',
555
+ 'editor.table.menu.merge_or_split_cells': 'Combinar o dividir celdas',
556
+ 'editor.table.menu.delete_table': 'Eliminar tabla',
557
+ 'editor.blockquote.tooltip': 'Cita en bloque',
558
+ 'editor.horizontalrule.tooltip': 'Línea horizontal',
559
+ 'editor.code.tooltip': 'Código',
560
+ 'editor.codeblock.tooltip': 'Bloque de código',
561
+ 'editor.clear.tooltip': 'Borrar formato',
562
+ 'editor.undo.tooltip': 'Deshacer',
563
+ 'editor.redo.tooltip': 'Rehacer',
564
+ 'editor.fullscreen.tooltip.fullscreen': 'Pantalla completa',
565
+ 'editor.fullscreen.tooltip.exit': 'Salir de pantalla completa',
566
+ });
360
567
 
361
568
  export { __vue_component__ as ZdRichText };
@@ -1,8 +1,8 @@
1
1
  (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@zeedhi/core'), require('@zeedhi/vuetify'), require('vue-property-decorator'), require('@zeedhi/zd-richtext-common'), require('tiptap-vuetify/dist/main.css')) :
3
- typeof define === 'function' && define.amd ? define(['exports', 'vue', '@zeedhi/core', '@zeedhi/vuetify', 'vue-property-decorator', '@zeedhi/zd-richtext-common', 'tiptap-vuetify/dist/main.css'], factory) :
4
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/zd-richtext-vue"] = {}, global.vue, global.core, global["@zeedhi/vuetify"], global["vue-property-decorator"], global["@zeedhi/zd-richtext-common"]));
5
- })(this, (function (exports, Vue, core, vuetify, vuePropertyDecorator, zdRichtextCommon) { 'use strict';
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';
6
6
 
7
7
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
8
 
@@ -34,93 +34,141 @@
34
34
  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
35
35
  }
36
36
 
37
- const { Bold, Italic, Strike, Underline, Code, ListItem, BulletList, OrderedList, HorizontalRule, Heading, } = require('tiptap-vuetify');
38
- let ZdRichText = class ZdRichText extends vuetify.ZdComponentRender {
37
+ let ZdRichText = class ZdRichText extends vuetify$1.ZdComponentRender {
39
38
  constructor() {
40
39
  super(...arguments);
41
- this.extensions = [
42
- Bold,
43
- Italic,
44
- Strike,
45
- Underline,
46
- [
47
- Heading,
48
- {
49
- options: {
50
- levels: [1, 2, 3],
51
- },
52
- },
53
- ],
54
- Code,
55
- HorizontalRule,
56
- ListItem,
57
- BulletList,
58
- OrderedList,
59
- ];
60
40
  this.instanceType = zdRichtextCommon.RichText;
41
+ this.toolbar = [
42
+ 'bold',
43
+ 'italic',
44
+ 'underline',
45
+ 'strike',
46
+ 'color',
47
+ // "highlight",
48
+ '|',
49
+ 'h1',
50
+ 'h2',
51
+ 'h3',
52
+ 'h4',
53
+ 'h5',
54
+ // "h6",
55
+ // "p",
56
+ '|',
57
+ 'left',
58
+ 'center',
59
+ 'right',
60
+ 'justify',
61
+ '|',
62
+ 'bulletList',
63
+ 'orderedList',
64
+ // "taskList",
65
+ // "indent",
66
+ // "outdent",
67
+ '|',
68
+ // "link",
69
+ // "image",
70
+ // "video",
71
+ // "table",
72
+ // "blockquote",
73
+ 'rule',
74
+ 'code',
75
+ ];
61
76
  }
62
77
  onKeyDown(event) {
63
78
  this.instance.onKeyDown(this.$el, event.key);
64
79
  }
80
+ changeLanguage() {
81
+ const newLanguage = core.I18n.instance.language.split('-')[0];
82
+ vuetifyProTiptap.locale.setLang(newLanguage);
83
+ }
65
84
  mounted() {
85
+ var _a;
86
+ if (this.$refs.tiptap.editor) {
87
+ this.instance.formatGetter.html = this.$refs.tiptap.editor.getHTML.bind(this.$refs.tiptap.editor);
88
+ this.instance.formatGetter.json = this.$refs.tiptap.editor.getJSON.bind(this.$refs.tiptap.editor);
89
+ }
90
+ const header = this.$el.querySelector('header.py-1.ps-1.vuetify-pro-tiptap-editor__toolbar.v-sheet.v-toolbar');
91
+ (_a = header) === null || _a === void 0 ? void 0 : _a.style.setProperty('background-color', this.toolbarColor || 'var(--v-primary-base)', 'important');
92
+ if (this.cardColor) {
93
+ const card = this.$el.querySelector('.vuetify-pro-tiptap-editor__content');
94
+ card.style.setProperty('background-color', this.cardColor, 'important');
95
+ }
96
+ this.changeLanguage();
66
97
  if (this.instance.fillHeight) {
67
- vuetify.setFillHeight(this.$el);
98
+ vuetify$1.setFillHeight(this.$el);
68
99
  }
100
+ core.I18n.registerChangeListener(this.changeLanguage);
101
+ }
102
+ destroyed() {
103
+ core.I18n.unregisterChangeListener(this.changeLanguage);
69
104
  }
70
105
  };
71
106
  __decorate([
72
- vuetify.PropWatch({ type: String, default: 'json' }),
107
+ vuetify$1.PropWatch({ type: String, default: 'html' }),
73
108
  __metadata("design:type", String)
74
109
  ], ZdRichText.prototype, "outputFormat", void 0);
75
110
  __decorate([
76
- vuetify.PropWatch({ type: String, default: '' }),
111
+ vuetify$1.PropWatch({ type: String, default: '' }),
77
112
  __metadata("design:type", String)
78
113
  ], ZdRichText.prototype, "placeholder", void 0);
79
114
  __decorate([
80
- vuetify.PropWatch({
115
+ vuetify$1.PropWatch({
81
116
  type: [Boolean, String],
82
117
  default: false,
83
118
  }),
84
119
  __metadata("design:type", Object)
85
120
  ], ZdRichText.prototype, "disabled", void 0);
86
121
  __decorate([
87
- vuetify.PropWatch({ type: String, default: undefined }),
122
+ vuetify$1.PropWatch({ type: String, default: undefined }),
88
123
  __metadata("design:type", String)
89
124
  ], ZdRichText.prototype, "toolbarColor", void 0);
90
125
  __decorate([
91
- vuetify.PropWatch({ type: String, default: '' }),
126
+ vuetify$1.PropWatch({ type: String, default: '' }),
127
+ __metadata("design:type", String)
128
+ ], ZdRichText.prototype, "content", void 0);
129
+ __decorate([
130
+ vuetify$1.PropWatch({ type: String, default: '' }),
92
131
  __metadata("design:type", String)
93
132
  ], ZdRichText.prototype, "cardColor", void 0);
94
133
  __decorate([
95
- vuetify.PropWatch({
134
+ vuetify$1.PropWatch({
96
135
  type: [Boolean, String],
97
136
  default: false,
98
137
  }),
99
138
  __metadata("design:type", Object)
100
139
  ], ZdRichText.prototype, "outlined", void 0);
101
140
  __decorate([
102
- vuetify.PropWatch({
141
+ vuetify$1.PropWatch({
103
142
  type: [Number, String],
104
143
  default: '',
105
144
  }),
106
145
  __metadata("design:type", Object)
107
146
  ], ZdRichText.prototype, "width", void 0);
108
147
  __decorate([
109
- vuetify.PropWatch({
148
+ vuetify$1.PropWatch({
110
149
  type: [Number, String],
111
150
  default: '',
112
151
  }),
113
152
  __metadata("design:type", Object)
114
153
  ], ZdRichText.prototype, "height", void 0);
115
154
  __decorate([
116
- vuetify.PropWatch({
155
+ vuetify$1.PropWatch({
156
+ type: [Object],
157
+ default: () => { },
158
+ }),
159
+ __metadata("design:type", Object)
160
+ ], ZdRichText.prototype, "formatGetter", void 0);
161
+ __decorate([
162
+ vuetify$1.PropWatch({
117
163
  type: [Boolean, String],
118
164
  default: false,
119
165
  }),
120
166
  __metadata("design:type", Boolean)
121
167
  ], ZdRichText.prototype, "fillHeight", void 0);
122
168
  ZdRichText = __decorate([
123
- vuePropertyDecorator.Component
169
+ vuePropertyDecorator.Component({
170
+ components: { EditorContent: vue2.EditorContent },
171
+ })
124
172
  ], ZdRichText);
125
173
  var script = ZdRichText;
126
174
 
@@ -271,40 +319,54 @@
271
319
  expression: "instance.isVisible",
272
320
  },
273
321
  ],
274
- class: ["zd-rich-text", _vm.instance.cssClass],
322
+ class: ["zd-rich-text", "zd-elevation-2", _vm.instance.cssClass],
275
323
  style: {
276
324
  height: _vm.$formatSize(_vm.instance.height),
277
325
  },
278
326
  attrs: { id: _vm.instance.name, name: _vm.instance.name },
327
+ on: {
328
+ keydown: function ($event) {
329
+ return _vm.onKeyDown($event)
330
+ },
331
+ },
279
332
  },
280
333
  [
281
- _c("tiptap-vuetify", {
334
+ _c("vuetify-tiptap", {
335
+ ref: "tiptap",
282
336
  attrs: {
283
- "output-format": _vm.instance.outputFormat,
284
- extensions: _vm.extensions,
285
- "toolbar-attributes": {
286
- color: _vm.instance.toolbarColor,
287
- class: "zd-rich-text-header rounded-t",
288
- width: _vm.instance.width,
289
- },
290
- "card-props": {
291
- color: _vm.instance.cardColor,
292
- class: "zd-rich-text-content rounded-b-md",
293
- outlined: _vm.instance.outlined,
294
- width: _vm.instance.width,
295
- height: "100%",
296
- style: _vm.instance.cssStyle,
297
- dark: _vm.instance.dark,
298
- light: _vm.instance.light,
299
- },
300
- placeholder: _vm.instance.placeholder,
337
+ markdownTheme: false,
338
+ dark: _vm.instance.dark,
301
339
  disabled: _vm.instance.disabled,
340
+ outlined: _vm.instance.outlined,
341
+ placeholder: _vm.instance.placeholder,
342
+ toolbar: _vm.toolbar,
343
+ rounded: "",
344
+ "max-width": _vm.instance.width,
302
345
  },
303
- on: {
304
- keydown: function ($event) {
305
- return _vm.onKeyDown($event)
346
+ scopedSlots: _vm._u([
347
+ {
348
+ key: "editor",
349
+ fn: function (ref) {
350
+ var editor = ref.editor;
351
+ var attrs = ref.attrs;
352
+ return [
353
+ _c("editor-content", {
354
+ staticClass:
355
+ "vuetify-pro-tiptap-editor__content zd-rich-text-content markdown-theme-github",
356
+ class: [{ __dark: attrs.isDark }, attrs.editorClass],
357
+ style: attrs.contentDynamicStyles,
358
+ attrs: { editor: editor, "data-testid": "value" },
359
+ }),
360
+ ]
361
+ },
306
362
  },
307
- },
363
+ {
364
+ key: "bottom",
365
+ fn: function (ref) {
366
+ return [_c("span")]
367
+ },
368
+ },
369
+ ]),
308
370
  model: {
309
371
  value: _vm.instance.content,
310
372
  callback: function ($$v) {
@@ -323,7 +385,7 @@
323
385
  /* style */
324
386
  const __vue_inject_styles__ = function (inject) {
325
387
  if (!inject) return
326
- inject("data-v-607b4853_0", { source: ".zd-rich-text button.v-btn {\n color: #ffffff !important;\n}\n.zd-rich-text-content.theme--dark {\n background-color: #383838;\n}\n.zd-rich-text .tiptap-vuetify-editor {\n height: 100%;\n}\n.zd-rich-text div.v-card {\n display: flex;\n flex-direction: column;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__toolbar {\n display: flex;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__toolbar header {\n background-color: var(--v-primary-base);\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__content {\n flex-grow: 1;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__content .ProseMirror {\n margin: var(--spacing-2) !important;\n height: 100%;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__content .ProseMirror p {\n margin-top: var(--spacing-2) !important;\n margin-bottom: var(--spacing-2) !important;\n}", map: undefined, media: undefined });
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 });
327
389
 
328
390
  };
329
391
  /* scoped */
@@ -351,15 +413,158 @@
351
413
  undefined
352
414
  );
353
415
 
354
- const TiptapVuetify = require('tiptap-vuetify');
355
- // tiptap-vuetify
356
- Vue__default["default"].use(TiptapVuetify.TiptapVuetifyPlugin, {
357
- vuetify: new vuetify.Vuetify(),
358
- iconsGroup: 'mdi',
416
+ const vuetify = new vuetify$1.Vuetify();
417
+ const VuetifyProTipTap = vuetifyProTiptap.createVuetifyProTipTap({
418
+ vuetify,
419
+ components: {
420
+ VuetifyTiptap: vuetifyProTiptap.VuetifyTiptap,
421
+ },
359
422
  });
360
- Vue__default["default"].component('tiptap-vuetify', TiptapVuetify.TiptapVuetify);
423
+ Vue__default["default"].use(VuetifyProTipTap);
361
424
  const packageContent = require('../package.json');
362
- core.VersionService.addPackageVersion(packageContent.name, packageContent.version);
425
+ core.VersionService.addPackageVersion(packageContent.name, packageContent.version);
426
+ vuetifyProTiptap.locale.setMessage('pt', {
427
+ 'editor.words': 'PALAVRAS',
428
+ 'editor.characters': 'CARACTERES',
429
+ 'editor.bold.tooltip': 'Negrito',
430
+ 'editor.italic.tooltip': 'Itálico',
431
+ 'editor.underline.tooltip': 'Sublinhado',
432
+ 'editor.strike.tooltip': 'Riscado',
433
+ 'editor.color.tooltip': 'Cor',
434
+ 'editor.highlight.tooltip': 'Realçar',
435
+ 'editor.heading.h1.tooltip': 'Título 1',
436
+ 'editor.heading.h2.tooltip': 'Título 2',
437
+ 'editor.heading.h3.tooltip': 'Título 3',
438
+ 'editor.heading.h4.tooltip': 'Título 4',
439
+ 'editor.heading.h5.tooltip': 'Título 5',
440
+ 'editor.heading.h6.tooltip': 'Título 6',
441
+ 'editor.paragraph.tooltip': 'Parágrafo',
442
+ 'editor.left.tooltip': 'Alinhar à Esquerda',
443
+ 'editor.center.tooltip': 'Centralizar',
444
+ 'editor.right.tooltip': 'Alinhar à Direita',
445
+ 'editor.justify.tooltip': 'Justificar',
446
+ 'editor.bulletlist.tooltip': 'Lista com Marcadores',
447
+ 'editor.orderedlist.tooltip': 'Lista Numerada',
448
+ 'editor.tasklist.tooltip': 'Lista de Tarefas',
449
+ 'editor.indent.tooltip': 'Recuar',
450
+ 'editor.outdent.tooltip': 'Recuar Menos',
451
+ 'editor.link.tooltip': 'Link',
452
+ 'editor.link.dialog.title': 'Inserir link',
453
+ 'editor.link.dialog.link': 'link',
454
+ 'editor.link.dialog.button.apply': 'aplicar',
455
+ 'editor.image.tooltip': 'Imagem',
456
+ 'editor.image.float.left.tooltip': 'Flutuar à Esquerda',
457
+ 'editor.image.float.none.tooltip': 'Sem Flutuação',
458
+ 'editor.image.float.right.tooltip': 'Flutuar à Direita',
459
+ 'editor.image.size.small.tooltip': 'Pequeno',
460
+ 'editor.image.size.medium.tooltip': 'Médio',
461
+ 'editor.image.size.large.tooltip': 'Grande',
462
+ 'editor.image.remove.tooltip': 'Remover',
463
+ 'editor.image.dialog.title': 'Inserir imagem',
464
+ 'editor.image.dialog.tab.url': 'URL',
465
+ 'editor.image.dialog.tab.upload': 'Upload',
466
+ 'editor.image.dialog.form.link': 'Link',
467
+ 'editor.image.dialog.form.alt': 'Alt',
468
+ 'editor.image.dialog.form.aspectRatio': 'Manter Proporções Originais',
469
+ 'editor.image.dialog.form.file': 'Arquivo',
470
+ 'editor.image.dialog.button.apply': 'aplicar',
471
+ 'editor.video.tooltip': 'Vídeo',
472
+ 'editor.video.dialog.title': 'Inserir vídeo',
473
+ 'editor.video.dialog.link': 'link',
474
+ 'editor.video.dialog.button.apply': 'aplicar',
475
+ 'editor.video.remove.tooltip': 'Remover',
476
+ 'editor.table.tooltip': 'Tabela',
477
+ 'editor.table.menu.insert_table': 'Inserir Tabela',
478
+ 'editor.table.menu.insert_table.with_header_row': 'Com Linha de Cabeçalho',
479
+ 'editor.table.menu.add_column_before': 'Adicionar Coluna Antes',
480
+ 'editor.table.menu.add_column_after': 'Adicionar Coluna Depois',
481
+ 'editor.table.menu.delete_column': 'Excluir Coluna',
482
+ 'editor.table.menu.add_row_before': 'Adicionar Linha Antes',
483
+ 'editor.table.menu.add_row_after': 'Adicionar Linha Depois',
484
+ 'editor.table.menu.delete_row': 'Excluir Linha',
485
+ 'editor.table.menu.merge_or_split_cells': 'Mesclar ou Dividir Células',
486
+ 'editor.table.menu.delete_table': 'Excluir Tabela',
487
+ 'editor.blockquote.tooltip': 'Citação',
488
+ 'editor.horizontalrule.tooltip': 'Linha Horizontal',
489
+ 'editor.code.tooltip': 'Código',
490
+ 'editor.codeblock.tooltip': 'Bloco de Código',
491
+ 'editor.clear.tooltip': 'Limpar Formatação',
492
+ 'editor.undo.tooltip': 'Desfazer',
493
+ 'editor.redo.tooltip': 'Refazer',
494
+ 'editor.fullscreen.tooltip.fullscreen': 'Tela Cheia',
495
+ 'editor.fullscreen.tooltip.exit': 'Sair da Tela Cheia',
496
+ });
497
+ vuetifyProTiptap.locale.setMessage('es', {
498
+ 'editor.words': 'PALABRAS',
499
+ 'editor.characters': 'CARACTERES',
500
+ 'editor.bold.tooltip': 'Negrita',
501
+ 'editor.italic.tooltip': 'Cursiva',
502
+ 'editor.underline.tooltip': 'Subrayado',
503
+ 'editor.strike.tooltip': 'Tachado',
504
+ 'editor.color.tooltip': 'Color',
505
+ 'editor.highlight.tooltip': 'Resaltar',
506
+ 'editor.heading.h1.tooltip': 'Encabezado 1',
507
+ 'editor.heading.h2.tooltip': 'Encabezado 2',
508
+ 'editor.heading.h3.tooltip': 'Encabezado 3',
509
+ 'editor.heading.h4.tooltip': 'Encabezado 4',
510
+ 'editor.heading.h5.tooltip': 'Encabezado 5',
511
+ 'editor.heading.h6.tooltip': 'Encabezado 6',
512
+ 'editor.paragraph.tooltip': 'Párrafo',
513
+ 'editor.left.tooltip': 'Alinear a la Izquierda',
514
+ 'editor.center.tooltip': 'Centrar',
515
+ 'editor.right.tooltip': 'Alinear a la Derecha',
516
+ 'editor.justify.tooltip': 'Justificar',
517
+ 'editor.bulletlist.tooltip': 'Lista con Viñetas',
518
+ 'editor.orderedlist.tooltip': 'Lista Numerada',
519
+ 'editor.tasklist.tooltip': 'Lista de Tareas',
520
+ 'editor.indent.tooltip': 'Sangrar',
521
+ 'editor.outdent.tooltip': 'Reducir Sangría',
522
+ 'editor.link.tooltip': 'Enlace',
523
+ 'editor.link.dialog.title': 'Insertar enlace',
524
+ 'editor.link.dialog.link': 'enlace',
525
+ 'editor.link.dialog.button.apply': 'aplicar',
526
+ 'editor.image.tooltip': 'Imagen',
527
+ 'editor.image.float.left.tooltip': 'Alinear a la Izquierda',
528
+ 'editor.image.float.none.tooltip': 'Sin Alineación',
529
+ 'editor.image.float.right.tooltip': 'Alinear a la Derecha',
530
+ 'editor.image.size.small.tooltip': 'Pequeño',
531
+ 'editor.image.size.medium.tooltip': 'Mediano',
532
+ 'editor.image.size.large.tooltip': 'Grande',
533
+ 'editor.image.remove.tooltip': 'Eliminar',
534
+ 'editor.image.dialog.title': 'Insertar imagen',
535
+ 'editor.image.dialog.tab.url': 'URL',
536
+ 'editor.image.dialog.tab.upload': 'Subir',
537
+ 'editor.image.dialog.form.link': 'Enlace',
538
+ 'editor.image.dialog.form.alt': 'Texto Alternativo',
539
+ 'editor.image.dialog.form.aspectRatio': 'Mantener proporciones originales',
540
+ 'editor.image.dialog.form.file': 'Archivo',
541
+ 'editor.image.dialog.button.apply': 'aplicar',
542
+ 'editor.video.tooltip': 'Video',
543
+ 'editor.video.dialog.title': 'Insertar video',
544
+ 'editor.video.dialog.link': 'enlace',
545
+ 'editor.video.dialog.button.apply': 'aplicar',
546
+ 'editor.video.remove.tooltip': 'Eliminar',
547
+ 'editor.table.tooltip': 'Tabla',
548
+ 'editor.table.menu.insert_table': 'Insertar tabla',
549
+ 'editor.table.menu.insert_table.with_header_row': 'Con fila de encabezado',
550
+ 'editor.table.menu.add_column_before': 'Agregar columna antes',
551
+ 'editor.table.menu.add_column_after': 'Agregar columna después',
552
+ 'editor.table.menu.delete_column': 'Eliminar columna',
553
+ 'editor.table.menu.add_row_before': 'Agregar fila antes',
554
+ 'editor.table.menu.add_row_after': 'Agregar fila después',
555
+ 'editor.table.menu.delete_row': 'Eliminar fila',
556
+ 'editor.table.menu.merge_or_split_cells': 'Combinar o dividir celdas',
557
+ 'editor.table.menu.delete_table': 'Eliminar tabla',
558
+ 'editor.blockquote.tooltip': 'Cita en bloque',
559
+ 'editor.horizontalrule.tooltip': 'Línea horizontal',
560
+ 'editor.code.tooltip': 'Código',
561
+ 'editor.codeblock.tooltip': 'Bloque de código',
562
+ 'editor.clear.tooltip': 'Borrar formato',
563
+ 'editor.undo.tooltip': 'Deshacer',
564
+ 'editor.redo.tooltip': 'Rehacer',
565
+ 'editor.fullscreen.tooltip.fullscreen': 'Pantalla completa',
566
+ 'editor.fullscreen.tooltip.exit': 'Salir de pantalla completa',
567
+ });
363
568
 
364
569
  exports.ZdRichText = __vue_component__;
365
570
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zeedhi/zd-richtext-vue",
3
- "version": "1.3.0",
3
+ "version": "1.3.2",
4
4
  "description": "RichTextVue by BVR",
5
5
  "main": "dist/rich-text-vue.umd.js",
6
6
  "module": "dist/rich-text-vue.esm.js",
@@ -14,8 +14,15 @@
14
14
  "watch": "rollup -cw"
15
15
  },
16
16
  "dependencies": {
17
+ "@tiptap/core": "^2.1.12",
18
+ "@tiptap/extension-font-family": "^2.1.12",
19
+ "@tiptap/extension-text-style": "^2.1.12",
20
+ "@tiptap/pm": "^2.1.12",
21
+ "@tiptap/starter-kit": "^2.1.12",
22
+ "@tiptap/vue-2": "^2.1.12",
17
23
  "tiptap-extensions": "1.35.*",
18
- "tiptap-vuetify": "2.24.*"
24
+ "tiptap-vuetify": "2.24.*",
25
+ "vuetify-pro-tiptap": "^1.4.3"
19
26
  },
20
27
  "peerDependencies": {
21
28
  "@zeedhi/vuetify": "*",
@@ -24,5 +31,5 @@
24
31
  "vue-class-component": "7.2.*",
25
32
  "vue-property-decorator": "9.1.*"
26
33
  },
27
- "gitHead": "ac6a6374b42d111534189e0c8d4e3d1b52266b54"
34
+ "gitHead": "5f202495829e7a912b0492c29f743ed5cc5a0c98"
28
35
  }
@@ -5,14 +5,19 @@ export default class ZdRichText extends ZdComponentRender {
5
5
  placeholder: string;
6
6
  disabled: boolean | string;
7
7
  toolbarColor: string;
8
+ content: string;
8
9
  cardColor: string;
9
10
  outlined: boolean | string;
10
11
  width: number | string;
11
12
  height: number | string;
13
+ formatGetter: Object | string;
12
14
  fillHeight: boolean;
13
- extensions: Array<any>;
14
15
  instance: RichText;
15
16
  instanceType: typeof RichText;
16
17
  onKeyDown(event: KeyboardEvent): void;
18
+ changeLanguage(): void;
19
+ toolbar: string[];
17
20
  mounted(): void;
21
+ test: any;
22
+ destroyed(): void;
18
23
  }
package/types/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import ZdRichText from './RichText.vue';
2
- import 'tiptap-vuetify/dist/main.css';
2
+ import 'vuetify-pro-tiptap/lib/style.css';
3
3
  export { ZdRichText };