@zeedhi/zd-richtext-vue 1.5.0 → 1.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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>
@@ -3,7 +3,7 @@ import { PropWatch, ZdComponentRender, setFillHeight, Vuetify } from '@zeedhi/vu
3
3
  import { locale, createVuetifyProTipTap, VuetifyTiptap } from '@zeedhi/zd-vuetify-pro-tiptap';
4
4
  import '@zeedhi/zd-vuetify-pro-tiptap/lib/style.css';
5
5
  import Vue, { ref } from 'vue';
6
- import { FontFamily as FontFamily$2 } from '@tiptap/extension-font-family';
6
+ import { FontFamily as FontFamily$1 } 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$1 = [
38
+ const fonts = [
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$1 = class FontFamily extends ZdComponentRender {
44
+ let FontFamily = class FontFamily extends ZdComponentRender {
45
45
  setFontStyle(editor, font) {
46
46
  editor.chain().focus().setFontFamily(font).run();
47
47
  }
@@ -49,18 +49,19 @@ let FontFamily$1 = class FontFamily extends ZdComponentRender {
49
49
  __decorate([
50
50
  PropWatch({ type: Object, default: '' }),
51
51
  __metadata("design:type", Object)
52
- ], FontFamily$1.prototype, "editor", void 0);
52
+ ], FontFamily.prototype, "editor", void 0);
53
53
  __decorate([
54
54
  PropWatch({ type: Object, default: '' }),
55
55
  __metadata("design:type", Object)
56
- ], FontFamily$1.prototype, "attrs", void 0);
56
+ ], FontFamily.prototype, "attrs", void 0);
57
57
  __decorate([
58
- PropWatch({ type: Array, default: () => (fonts$1) }),
58
+ PropWatch({ type: Array, default: () => (fonts) }),
59
59
  __metadata("design:type", Array)
60
- ], FontFamily$1.prototype, "fonts", void 0);
61
- FontFamily$1 = __decorate([
60
+ ], FontFamily.prototype, "fonts", void 0);
61
+ FontFamily = __decorate([
62
62
  Component
63
- ], FontFamily$1);
63
+ ], FontFamily);
64
+ var script$1 = FontFamily;
64
65
 
65
66
  let installed = false;
66
67
  const setInstalled = () => {
@@ -73,7 +74,7 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
73
74
  super(...arguments);
74
75
  this.instanceType = RichText;
75
76
  this.isMounted = false;
76
- this.extensions = [FontFamily$2];
77
+ this.extensions = [FontFamily$1];
77
78
  this.toolbar = ref([
78
79
  'bold',
79
80
  'italic',
@@ -183,7 +184,7 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
183
184
  if (editor)
184
185
  editor.setOptions({ editable: isEditable });
185
186
  }
186
- destroyed() {
187
+ beforeDestroy() {
187
188
  I18n.unregisterChangeListener(this.changeLanguage);
188
189
  this.$refs.tiptap.editor.off('focus', this.onFocus);
189
190
  this.$refs.tiptap.editor.off('blur', this.onBlur);
@@ -221,7 +222,7 @@ __decorate([
221
222
  __metadata("design:type", String)
222
223
  ], ZdRichText.prototype, "cardColor", void 0);
223
224
  __decorate([
224
- PropWatch({ type: Array, default: () => (fonts$1) }),
225
+ PropWatch({ type: Array, default: () => (fonts) }),
225
226
  __metadata("design:type", Array)
226
227
  ], ZdRichText.prototype, "fonts", void 0);
227
228
  __decorate([
@@ -277,7 +278,7 @@ ZdRichText = __decorate([
277
278
  components: { EditorContent },
278
279
  })
279
280
  ], ZdRichText);
280
- var script$1 = ZdRichText;
281
+ var script = ZdRichText;
281
282
 
282
283
  function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
283
284
  if (typeof shadowMode !== 'boolean') {
@@ -408,7 +409,7 @@ function addStyle(id, css) {
408
409
  }
409
410
 
410
411
  /* script */
411
- const __vue_script__$1 = script$1;
412
+ const __vue_script__$1 = script;
412
413
 
413
414
  /* template */
414
415
  var __vue_render__$1 = function () {
@@ -515,7 +516,7 @@ __vue_render__$1._withStripped = true;
515
516
  /* style */
516
517
  const __vue_inject_styles__$1 = function (inject) {
517
518
  if (!inject) return
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 });
519
+ inject("data-v-45ed460e_0", { source: ".zd-rich-text #tippy-1 {\n display: none;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor.v-card.v-card--flat.v-sheet.theme--light.rounded {\n background-color: #ffffff !important;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor.v-card.v-card--flat.v-sheet.theme--dark.rounded {\n background-color: #383838 !important;\n}\n.zd-rich-text .zd-rich-text--disabled .vuetify-pro-tiptap-editor__toolbar {\n pointer-events: none;\n opacity: 0.5;\n}\n.zd-rich-text .zd-rich-text--readonly {\n width: 741px;\n}\n.zd-rich-text .v-toolbar__content button.v-btn {\n color: #ffffff !important;\n}", map: undefined, media: undefined });
519
520
 
520
521
  };
521
522
  /* scoped */
@@ -543,36 +544,8 @@ __vue_render__$1._withStripped = true;
543
544
  undefined
544
545
  );
545
546
 
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
-
574
547
  /* script */
575
- const __vue_script__ = script;
548
+ const __vue_script__ = script$1;
576
549
 
577
550
  /* template */
578
551
  var __vue_render__ = function () {
@@ -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$1 = [
38
+ const fonts = [
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$1 = class FontFamily extends vuetify$1.ZdComponentRender {
44
+ let FontFamily = class FontFamily extends vuetify$1.ZdComponentRender {
45
45
  setFontStyle(editor, font) {
46
46
  editor.chain().focus().setFontFamily(font).run();
47
47
  }
@@ -49,18 +49,19 @@
49
49
  __decorate([
50
50
  vuetify$1.PropWatch({ type: Object, default: '' }),
51
51
  __metadata("design:type", Object)
52
- ], FontFamily$1.prototype, "editor", void 0);
52
+ ], FontFamily.prototype, "editor", void 0);
53
53
  __decorate([
54
54
  vuetify$1.PropWatch({ type: Object, default: '' }),
55
55
  __metadata("design:type", Object)
56
- ], FontFamily$1.prototype, "attrs", void 0);
56
+ ], FontFamily.prototype, "attrs", void 0);
57
57
  __decorate([
58
- vuetify$1.PropWatch({ type: Array, default: () => (fonts$1) }),
58
+ vuetify$1.PropWatch({ type: Array, default: () => (fonts) }),
59
59
  __metadata("design:type", Array)
60
- ], FontFamily$1.prototype, "fonts", void 0);
61
- FontFamily$1 = __decorate([
60
+ ], FontFamily.prototype, "fonts", void 0);
61
+ FontFamily = __decorate([
62
62
  Component__default["default"]
63
- ], FontFamily$1);
63
+ ], FontFamily);
64
+ var script$1 = FontFamily;
64
65
 
65
66
  let installed = false;
66
67
  const setInstalled = () => {
@@ -183,7 +184,7 @@
183
184
  if (editor)
184
185
  editor.setOptions({ editable: isEditable });
185
186
  }
186
- destroyed() {
187
+ beforeDestroy() {
187
188
  core.I18n.unregisterChangeListener(this.changeLanguage);
188
189
  this.$refs.tiptap.editor.off('focus', this.onFocus);
189
190
  this.$refs.tiptap.editor.off('blur', this.onBlur);
@@ -221,7 +222,7 @@
221
222
  __metadata("design:type", String)
222
223
  ], ZdRichText.prototype, "cardColor", void 0);
223
224
  __decorate([
224
- vuetify$1.PropWatch({ type: Array, default: () => (fonts$1) }),
225
+ vuetify$1.PropWatch({ type: Array, default: () => (fonts) }),
225
226
  __metadata("design:type", Array)
226
227
  ], ZdRichText.prototype, "fonts", void 0);
227
228
  __decorate([
@@ -277,7 +278,7 @@
277
278
  components: { EditorContent: vue2.EditorContent },
278
279
  })
279
280
  ], ZdRichText);
280
- var script$1 = ZdRichText;
281
+ var script = ZdRichText;
281
282
 
282
283
  function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
283
284
  if (typeof shadowMode !== 'boolean') {
@@ -408,7 +409,7 @@
408
409
  }
409
410
 
410
411
  /* script */
411
- const __vue_script__$1 = script$1;
412
+ const __vue_script__$1 = script;
412
413
 
413
414
  /* template */
414
415
  var __vue_render__$1 = function () {
@@ -515,7 +516,7 @@
515
516
  /* style */
516
517
  const __vue_inject_styles__$1 = function (inject) {
517
518
  if (!inject) return
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 });
519
+ inject("data-v-45ed460e_0", { source: ".zd-rich-text #tippy-1 {\n display: none;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor.v-card.v-card--flat.v-sheet.theme--light.rounded {\n background-color: #ffffff !important;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor.v-card.v-card--flat.v-sheet.theme--dark.rounded {\n background-color: #383838 !important;\n}\n.zd-rich-text .zd-rich-text--disabled .vuetify-pro-tiptap-editor__toolbar {\n pointer-events: none;\n opacity: 0.5;\n}\n.zd-rich-text .zd-rich-text--readonly {\n width: 741px;\n}\n.zd-rich-text .v-toolbar__content button.v-btn {\n color: #ffffff !important;\n}", map: undefined, media: undefined });
519
520
 
520
521
  };
521
522
  /* scoped */
@@ -543,36 +544,8 @@
543
544
  undefined
544
545
  );
545
546
 
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
-
574
547
  /* script */
575
- const __vue_script__ = script;
548
+ const __vue_script__ = script$1;
576
549
 
577
550
  /* template */
578
551
  var __vue_render__ = function () {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zeedhi/zd-richtext-vue",
3
- "version": "1.5.0",
3
+ "version": "1.5.1",
4
4
  "description": "RichTextVue by BVR",
5
5
  "main": "dist/rich-text-vue.umd.js",
6
6
  "module": "dist/rich-text-vue.esm.js",
@@ -31,5 +31,5 @@
31
31
  "vue-class-component": "7.2.*",
32
32
  "vue-property-decorator": "9.1.*"
33
33
  },
34
- "gitHead": "92f5ac1c3c2438c8c5053154993c204a51de59a0"
34
+ "gitHead": "1b3715e1a7255b053f46736ebab3b87c1ee644f5"
35
35
  }
@@ -31,5 +31,5 @@ export default class ZdRichText extends ZdComponentRender {
31
31
  created(): void;
32
32
  mounted(): void;
33
33
  setEditorDisabled(): void;
34
- destroyed(): void;
34
+ beforeDestroy(): void;
35
35
  }