@zeedhi/zd-richtext-vue 1.5.0 → 1.5.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.
- package/README.md +74 -74
- package/dist/rich-text-vue.esm.js +181 -117
- package/dist/rich-text-vue.umd.js +179 -115
- package/package.json +2 -2
- package/types/RichText.d.ts +5 -1
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
|
-
|
|
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
|
+
|
|
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$
|
|
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
|
|
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
|
|
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
|
|
52
|
+
], FontFamily.prototype, "editor", void 0);
|
|
53
53
|
__decorate([
|
|
54
54
|
PropWatch({ type: Object, default: '' }),
|
|
55
55
|
__metadata("design:type", Object)
|
|
56
|
-
], FontFamily
|
|
56
|
+
], FontFamily.prototype, "attrs", void 0);
|
|
57
57
|
__decorate([
|
|
58
|
-
PropWatch({ type: Array, default: () => (fonts
|
|
58
|
+
PropWatch({ type: Array, default: () => (fonts) }),
|
|
59
59
|
__metadata("design:type", Array)
|
|
60
|
-
], FontFamily
|
|
61
|
-
FontFamily
|
|
60
|
+
], FontFamily.prototype, "fonts", void 0);
|
|
61
|
+
FontFamily = __decorate([
|
|
62
62
|
Component
|
|
63
|
-
], FontFamily
|
|
63
|
+
], FontFamily);
|
|
64
|
+
var script$1 = FontFamily;
|
|
64
65
|
|
|
65
66
|
let installed = false;
|
|
66
67
|
const setInstalled = () => {
|
|
@@ -73,7 +74,8 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
|
|
|
73
74
|
super(...arguments);
|
|
74
75
|
this.instanceType = RichText;
|
|
75
76
|
this.isMounted = false;
|
|
76
|
-
this.
|
|
77
|
+
this.isFocused = false;
|
|
78
|
+
this.extensions = [FontFamily$1];
|
|
77
79
|
this.toolbar = ref([
|
|
78
80
|
'bold',
|
|
79
81
|
'italic',
|
|
@@ -120,6 +122,49 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
|
|
|
120
122
|
this.toolbarReadonly = ref([
|
|
121
123
|
// 'bold',
|
|
122
124
|
]);
|
|
125
|
+
this.toolbarFullscreen = ref([
|
|
126
|
+
'bold',
|
|
127
|
+
'italic',
|
|
128
|
+
'underline',
|
|
129
|
+
'strike',
|
|
130
|
+
'color',
|
|
131
|
+
// "highlight",
|
|
132
|
+
'|',
|
|
133
|
+
'h1',
|
|
134
|
+
'h2',
|
|
135
|
+
'h3',
|
|
136
|
+
'h4',
|
|
137
|
+
'h5',
|
|
138
|
+
// "h6",
|
|
139
|
+
// "p",
|
|
140
|
+
'|',
|
|
141
|
+
'left',
|
|
142
|
+
'center',
|
|
143
|
+
'right',
|
|
144
|
+
'justify',
|
|
145
|
+
'|',
|
|
146
|
+
'bulletList',
|
|
147
|
+
'orderedList',
|
|
148
|
+
// "taskList",
|
|
149
|
+
// "indent",
|
|
150
|
+
// "outdent",
|
|
151
|
+
'|',
|
|
152
|
+
// "link",
|
|
153
|
+
'image',
|
|
154
|
+
// "video",
|
|
155
|
+
// "table",
|
|
156
|
+
// "blockquote",
|
|
157
|
+
'rule',
|
|
158
|
+
'code',
|
|
159
|
+
'|',
|
|
160
|
+
// "codeBlock",
|
|
161
|
+
// "|",
|
|
162
|
+
// "clear",
|
|
163
|
+
'fullscreen',
|
|
164
|
+
// "undo",
|
|
165
|
+
// "redo",
|
|
166
|
+
'#fontFamily',
|
|
167
|
+
]);
|
|
123
168
|
}
|
|
124
169
|
onKeyDown(event) {
|
|
125
170
|
this.instance.onKeyDown(this.$el, event.key);
|
|
@@ -139,12 +184,14 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
|
|
|
139
184
|
onFocus(event) {
|
|
140
185
|
this.instance.onFocus(event);
|
|
141
186
|
this.initialFocusValue = this.instance.content;
|
|
187
|
+
this.isFocused = true;
|
|
142
188
|
}
|
|
143
189
|
onBlur(event) {
|
|
144
190
|
this.instance.onBlur(event);
|
|
145
191
|
if (this.initialFocusValue !== this.instance.content) {
|
|
146
192
|
this.instance.onChange(this.instance.content);
|
|
147
193
|
}
|
|
194
|
+
this.isFocused = false;
|
|
148
195
|
}
|
|
149
196
|
created() {
|
|
150
197
|
if (!getInstalled()) {
|
|
@@ -183,7 +230,7 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
|
|
|
183
230
|
if (editor)
|
|
184
231
|
editor.setOptions({ editable: isEditable });
|
|
185
232
|
}
|
|
186
|
-
|
|
233
|
+
beforeDestroy() {
|
|
187
234
|
I18n.unregisterChangeListener(this.changeLanguage);
|
|
188
235
|
this.$refs.tiptap.editor.off('focus', this.onFocus);
|
|
189
236
|
this.$refs.tiptap.editor.off('blur', this.onBlur);
|
|
@@ -221,9 +268,13 @@ __decorate([
|
|
|
221
268
|
__metadata("design:type", String)
|
|
222
269
|
], ZdRichText.prototype, "cardColor", void 0);
|
|
223
270
|
__decorate([
|
|
224
|
-
PropWatch({ type: Array, default: () => (fonts
|
|
271
|
+
PropWatch({ type: Array, default: () => (fonts) }),
|
|
225
272
|
__metadata("design:type", Array)
|
|
226
273
|
], ZdRichText.prototype, "fonts", void 0);
|
|
274
|
+
__decorate([
|
|
275
|
+
PropWatch({ type: Boolean, default: false }),
|
|
276
|
+
__metadata("design:type", Boolean)
|
|
277
|
+
], ZdRichText.prototype, "enableFullscreen", void 0);
|
|
227
278
|
__decorate([
|
|
228
279
|
PropWatch({
|
|
229
280
|
type: [Boolean, String],
|
|
@@ -266,6 +317,13 @@ __decorate([
|
|
|
266
317
|
}),
|
|
267
318
|
__metadata("design:type", Boolean)
|
|
268
319
|
], ZdRichText.prototype, "fillHeight", void 0);
|
|
320
|
+
__decorate([
|
|
321
|
+
PropWatch({
|
|
322
|
+
type: String,
|
|
323
|
+
default: '',
|
|
324
|
+
}),
|
|
325
|
+
__metadata("design:type", String)
|
|
326
|
+
], ZdRichText.prototype, "label", void 0);
|
|
269
327
|
__decorate([
|
|
270
328
|
Watch('instance.content'),
|
|
271
329
|
__metadata("design:type", Function),
|
|
@@ -277,7 +335,7 @@ ZdRichText = __decorate([
|
|
|
277
335
|
components: { EditorContent },
|
|
278
336
|
})
|
|
279
337
|
], ZdRichText);
|
|
280
|
-
var script
|
|
338
|
+
var script = ZdRichText;
|
|
281
339
|
|
|
282
340
|
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
|
|
283
341
|
if (typeof shadowMode !== 'boolean') {
|
|
@@ -408,7 +466,7 @@ function addStyle(id, css) {
|
|
|
408
466
|
}
|
|
409
467
|
|
|
410
468
|
/* script */
|
|
411
|
-
const __vue_script__$1 = script
|
|
469
|
+
const __vue_script__$1 = script;
|
|
412
470
|
|
|
413
471
|
/* template */
|
|
414
472
|
var __vue_render__$1 = function () {
|
|
@@ -426,87 +484,121 @@ var __vue_render__$1 = function () {
|
|
|
426
484
|
expression: "instance.isVisible",
|
|
427
485
|
},
|
|
428
486
|
],
|
|
429
|
-
class: ["zd-rich-text"
|
|
430
|
-
style: {
|
|
431
|
-
height: _vm.$formatSize(_vm.instance.height),
|
|
432
|
-
},
|
|
487
|
+
class: ["zd-rich-text"],
|
|
433
488
|
attrs: { id: _vm.instance.name, name: _vm.instance.name },
|
|
434
|
-
on: {
|
|
435
|
-
keydown: function ($event) {
|
|
436
|
-
return _vm.onKeyDown($event)
|
|
437
|
-
},
|
|
438
|
-
},
|
|
439
489
|
},
|
|
440
490
|
[
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
placeholder: _vm.instance.placeholder,
|
|
454
|
-
toolbar: _vm.readonly ? _vm.toolbarReadonly : _vm.toolbar,
|
|
455
|
-
rounded: "",
|
|
456
|
-
"max-width": _vm.instance.width,
|
|
457
|
-
extensions: _vm.extensions,
|
|
458
|
-
},
|
|
459
|
-
scopedSlots: _vm._u([
|
|
460
|
-
{
|
|
461
|
-
key: "editor",
|
|
462
|
-
fn: function (ref) {
|
|
463
|
-
var editor = ref.editor;
|
|
464
|
-
var attrs = ref.attrs;
|
|
465
|
-
return [
|
|
466
|
-
_c("editor-content", {
|
|
467
|
-
staticClass:
|
|
468
|
-
"vuetify-pro-tiptap-editor__content zd-rich-text-content markdown-theme-github",
|
|
469
|
-
class: [{ __dark: attrs.isDark }, attrs.editorClass],
|
|
470
|
-
style: attrs.contentDynamicStyles,
|
|
471
|
-
attrs: { editor: editor, "data-testid": "value" },
|
|
472
|
-
}),
|
|
491
|
+
_vm.instance.label
|
|
492
|
+
? _c("span", [
|
|
493
|
+
_c(
|
|
494
|
+
"label",
|
|
495
|
+
{
|
|
496
|
+
staticClass: "v-label v-label--active theme--light",
|
|
497
|
+
class: { "label--focused": _vm.isFocused },
|
|
498
|
+
},
|
|
499
|
+
[
|
|
500
|
+
_vm._v(
|
|
501
|
+
"\n " + _vm._s(_vm.$t(_vm.instance.label)) + "\n "
|
|
502
|
+
),
|
|
473
503
|
]
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
504
|
+
),
|
|
505
|
+
])
|
|
506
|
+
: _vm._e(),
|
|
507
|
+
_vm._v(" "),
|
|
508
|
+
_c(
|
|
509
|
+
"div",
|
|
510
|
+
{
|
|
511
|
+
class: ["zd-rich-text", "zd-elevation-2", _vm.instance.cssClass],
|
|
512
|
+
style: {
|
|
513
|
+
height: _vm.$formatSize(_vm.instance.height),
|
|
481
514
|
},
|
|
482
|
-
{
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
var editor = ref.editor;
|
|
486
|
-
var attrs = ref.attrs;
|
|
487
|
-
return [
|
|
488
|
-
_c("FontFamily", {
|
|
489
|
-
attrs: {
|
|
490
|
-
name: _vm.instance.name + "-fontFamily",
|
|
491
|
-
editor: editor,
|
|
492
|
-
attrs: attrs,
|
|
493
|
-
fonts: _vm.instance.fonts,
|
|
494
|
-
},
|
|
495
|
-
}),
|
|
496
|
-
]
|
|
515
|
+
on: {
|
|
516
|
+
keydown: function ($event) {
|
|
517
|
+
return _vm.onKeyDown($event)
|
|
497
518
|
},
|
|
498
519
|
},
|
|
499
|
-
]),
|
|
500
|
-
model: {
|
|
501
|
-
value: _vm.instance.content,
|
|
502
|
-
callback: function ($$v) {
|
|
503
|
-
_vm.$set(_vm.instance, "content", $$v);
|
|
504
|
-
},
|
|
505
|
-
expression: "instance.content",
|
|
506
520
|
},
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
521
|
+
[
|
|
522
|
+
_c("vuetify-tiptap", {
|
|
523
|
+
ref: "tiptap",
|
|
524
|
+
class: [
|
|
525
|
+
{ "zd-rich-text--disabled": _vm.instance.disabled },
|
|
526
|
+
_vm.readonly && !_vm.hasClass() && "zd-rich-text--readonly",
|
|
527
|
+
],
|
|
528
|
+
attrs: {
|
|
529
|
+
markdownTheme: false,
|
|
530
|
+
dark: _vm.instance.dark,
|
|
531
|
+
disabled: _vm.instance.disabled,
|
|
532
|
+
readonly: _vm.instance.readonly,
|
|
533
|
+
outlined: _vm.instance.outlined,
|
|
534
|
+
placeholder: _vm.instance.placeholder,
|
|
535
|
+
toolbar: _vm.readonly
|
|
536
|
+
? _vm.toolbarReadonly
|
|
537
|
+
: _vm.enableFullscreen
|
|
538
|
+
? _vm.toolbarFullscreen
|
|
539
|
+
: _vm.toolbar,
|
|
540
|
+
rounded: "",
|
|
541
|
+
"max-width": _vm.instance.width,
|
|
542
|
+
extensions: _vm.extensions,
|
|
543
|
+
},
|
|
544
|
+
on: {
|
|
545
|
+
onFocus: function ($event) {
|
|
546
|
+
return _vm.onFocus($event)
|
|
547
|
+
},
|
|
548
|
+
},
|
|
549
|
+
scopedSlots: _vm._u([
|
|
550
|
+
{
|
|
551
|
+
key: "editor",
|
|
552
|
+
fn: function (ref) {
|
|
553
|
+
var editor = ref.editor;
|
|
554
|
+
var attrs = ref.attrs;
|
|
555
|
+
return [
|
|
556
|
+
_c("editor-content", {
|
|
557
|
+
staticClass:
|
|
558
|
+
"vuetify-pro-tiptap-editor__content zd-rich-text-content markdown-theme-github",
|
|
559
|
+
class: [{ __dark: attrs.isDark }, attrs.editorClass],
|
|
560
|
+
style: attrs.contentDynamicStyles,
|
|
561
|
+
attrs: { editor: editor, "data-testid": "value" },
|
|
562
|
+
}),
|
|
563
|
+
]
|
|
564
|
+
},
|
|
565
|
+
},
|
|
566
|
+
{
|
|
567
|
+
key: "bottom",
|
|
568
|
+
fn: function (ref) {
|
|
569
|
+
return [_c("span")]
|
|
570
|
+
},
|
|
571
|
+
},
|
|
572
|
+
{
|
|
573
|
+
key: "fontFamily",
|
|
574
|
+
fn: function (ref) {
|
|
575
|
+
var editor = ref.editor;
|
|
576
|
+
var attrs = ref.attrs;
|
|
577
|
+
return [
|
|
578
|
+
_c("FontFamily", {
|
|
579
|
+
attrs: {
|
|
580
|
+
name: _vm.instance.name + "-fontFamily",
|
|
581
|
+
editor: editor,
|
|
582
|
+
attrs: attrs,
|
|
583
|
+
fonts: _vm.instance.fonts,
|
|
584
|
+
},
|
|
585
|
+
}),
|
|
586
|
+
]
|
|
587
|
+
},
|
|
588
|
+
},
|
|
589
|
+
]),
|
|
590
|
+
model: {
|
|
591
|
+
value: _vm.instance.content,
|
|
592
|
+
callback: function ($$v) {
|
|
593
|
+
_vm.$set(_vm.instance, "content", $$v);
|
|
594
|
+
},
|
|
595
|
+
expression: "instance.content",
|
|
596
|
+
},
|
|
597
|
+
}),
|
|
598
|
+
],
|
|
599
|
+
1
|
|
600
|
+
),
|
|
601
|
+
]
|
|
510
602
|
)
|
|
511
603
|
};
|
|
512
604
|
var __vue_staticRenderFns__$1 = [];
|
|
@@ -515,7 +607,7 @@ __vue_render__$1._withStripped = true;
|
|
|
515
607
|
/* style */
|
|
516
608
|
const __vue_inject_styles__$1 = function (inject) {
|
|
517
609
|
if (!inject) return
|
|
518
|
-
inject("data-v-
|
|
610
|
+
inject("data-v-31adb996_0", { source: ".zd-rich-text #tippy-1 {\n display: none;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor--fullscreen .vuetify-pro-tiptap-editor__content {\n height: -webkit-fill-available;\n}\n.zd-rich-text .v-label {\n top: calc(-10px - var(--spacing-2));\n max-width: 100%;\n transform: none;\n font-size: var(--zd-font-body1-size);\n left: 0 !important;\n line-height: 15px;\n height: auto;\n font-weight: var(--zd-font-body1-weight);\n}\n.zd-rich-text .label--focused {\n transition: 0ms;\n color: var(--v-primary-base);\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
611
|
|
|
520
612
|
};
|
|
521
613
|
/* scoped */
|
|
@@ -543,36 +635,8 @@ __vue_render__$1._withStripped = true;
|
|
|
543
635
|
undefined
|
|
544
636
|
);
|
|
545
637
|
|
|
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
638
|
/* script */
|
|
575
|
-
const __vue_script__ = script;
|
|
639
|
+
const __vue_script__ = script$1;
|
|
576
640
|
|
|
577
641
|
/* template */
|
|
578
642
|
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
|
|
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
|
|
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
|
|
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
|
|
56
|
+
], FontFamily.prototype, "attrs", void 0);
|
|
57
57
|
__decorate([
|
|
58
|
-
vuetify$1.PropWatch({ type: Array, default: () => (fonts
|
|
58
|
+
vuetify$1.PropWatch({ type: Array, default: () => (fonts) }),
|
|
59
59
|
__metadata("design:type", Array)
|
|
60
|
-
], FontFamily
|
|
61
|
-
FontFamily
|
|
60
|
+
], FontFamily.prototype, "fonts", void 0);
|
|
61
|
+
FontFamily = __decorate([
|
|
62
62
|
Component__default["default"]
|
|
63
|
-
], FontFamily
|
|
63
|
+
], FontFamily);
|
|
64
|
+
var script$1 = FontFamily;
|
|
64
65
|
|
|
65
66
|
let installed = false;
|
|
66
67
|
const setInstalled = () => {
|
|
@@ -73,6 +74,7 @@
|
|
|
73
74
|
super(...arguments);
|
|
74
75
|
this.instanceType = zdRichtextCommon.RichText;
|
|
75
76
|
this.isMounted = false;
|
|
77
|
+
this.isFocused = false;
|
|
76
78
|
this.extensions = [extensionFontFamily.FontFamily];
|
|
77
79
|
this.toolbar = Vue.ref([
|
|
78
80
|
'bold',
|
|
@@ -120,6 +122,49 @@
|
|
|
120
122
|
this.toolbarReadonly = Vue.ref([
|
|
121
123
|
// 'bold',
|
|
122
124
|
]);
|
|
125
|
+
this.toolbarFullscreen = Vue.ref([
|
|
126
|
+
'bold',
|
|
127
|
+
'italic',
|
|
128
|
+
'underline',
|
|
129
|
+
'strike',
|
|
130
|
+
'color',
|
|
131
|
+
// "highlight",
|
|
132
|
+
'|',
|
|
133
|
+
'h1',
|
|
134
|
+
'h2',
|
|
135
|
+
'h3',
|
|
136
|
+
'h4',
|
|
137
|
+
'h5',
|
|
138
|
+
// "h6",
|
|
139
|
+
// "p",
|
|
140
|
+
'|',
|
|
141
|
+
'left',
|
|
142
|
+
'center',
|
|
143
|
+
'right',
|
|
144
|
+
'justify',
|
|
145
|
+
'|',
|
|
146
|
+
'bulletList',
|
|
147
|
+
'orderedList',
|
|
148
|
+
// "taskList",
|
|
149
|
+
// "indent",
|
|
150
|
+
// "outdent",
|
|
151
|
+
'|',
|
|
152
|
+
// "link",
|
|
153
|
+
'image',
|
|
154
|
+
// "video",
|
|
155
|
+
// "table",
|
|
156
|
+
// "blockquote",
|
|
157
|
+
'rule',
|
|
158
|
+
'code',
|
|
159
|
+
'|',
|
|
160
|
+
// "codeBlock",
|
|
161
|
+
// "|",
|
|
162
|
+
// "clear",
|
|
163
|
+
'fullscreen',
|
|
164
|
+
// "undo",
|
|
165
|
+
// "redo",
|
|
166
|
+
'#fontFamily',
|
|
167
|
+
]);
|
|
123
168
|
}
|
|
124
169
|
onKeyDown(event) {
|
|
125
170
|
this.instance.onKeyDown(this.$el, event.key);
|
|
@@ -139,12 +184,14 @@
|
|
|
139
184
|
onFocus(event) {
|
|
140
185
|
this.instance.onFocus(event);
|
|
141
186
|
this.initialFocusValue = this.instance.content;
|
|
187
|
+
this.isFocused = true;
|
|
142
188
|
}
|
|
143
189
|
onBlur(event) {
|
|
144
190
|
this.instance.onBlur(event);
|
|
145
191
|
if (this.initialFocusValue !== this.instance.content) {
|
|
146
192
|
this.instance.onChange(this.instance.content);
|
|
147
193
|
}
|
|
194
|
+
this.isFocused = false;
|
|
148
195
|
}
|
|
149
196
|
created() {
|
|
150
197
|
if (!getInstalled()) {
|
|
@@ -183,7 +230,7 @@
|
|
|
183
230
|
if (editor)
|
|
184
231
|
editor.setOptions({ editable: isEditable });
|
|
185
232
|
}
|
|
186
|
-
|
|
233
|
+
beforeDestroy() {
|
|
187
234
|
core.I18n.unregisterChangeListener(this.changeLanguage);
|
|
188
235
|
this.$refs.tiptap.editor.off('focus', this.onFocus);
|
|
189
236
|
this.$refs.tiptap.editor.off('blur', this.onBlur);
|
|
@@ -221,9 +268,13 @@
|
|
|
221
268
|
__metadata("design:type", String)
|
|
222
269
|
], ZdRichText.prototype, "cardColor", void 0);
|
|
223
270
|
__decorate([
|
|
224
|
-
vuetify$1.PropWatch({ type: Array, default: () => (fonts
|
|
271
|
+
vuetify$1.PropWatch({ type: Array, default: () => (fonts) }),
|
|
225
272
|
__metadata("design:type", Array)
|
|
226
273
|
], ZdRichText.prototype, "fonts", void 0);
|
|
274
|
+
__decorate([
|
|
275
|
+
vuetify$1.PropWatch({ type: Boolean, default: false }),
|
|
276
|
+
__metadata("design:type", Boolean)
|
|
277
|
+
], ZdRichText.prototype, "enableFullscreen", void 0);
|
|
227
278
|
__decorate([
|
|
228
279
|
vuetify$1.PropWatch({
|
|
229
280
|
type: [Boolean, String],
|
|
@@ -266,6 +317,13 @@
|
|
|
266
317
|
}),
|
|
267
318
|
__metadata("design:type", Boolean)
|
|
268
319
|
], ZdRichText.prototype, "fillHeight", void 0);
|
|
320
|
+
__decorate([
|
|
321
|
+
vuetify$1.PropWatch({
|
|
322
|
+
type: String,
|
|
323
|
+
default: '',
|
|
324
|
+
}),
|
|
325
|
+
__metadata("design:type", String)
|
|
326
|
+
], ZdRichText.prototype, "label", void 0);
|
|
269
327
|
__decorate([
|
|
270
328
|
vuePropertyDecorator.Watch('instance.content'),
|
|
271
329
|
__metadata("design:type", Function),
|
|
@@ -277,7 +335,7 @@
|
|
|
277
335
|
components: { EditorContent: vue2.EditorContent },
|
|
278
336
|
})
|
|
279
337
|
], ZdRichText);
|
|
280
|
-
var script
|
|
338
|
+
var script = ZdRichText;
|
|
281
339
|
|
|
282
340
|
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
|
|
283
341
|
if (typeof shadowMode !== 'boolean') {
|
|
@@ -408,7 +466,7 @@
|
|
|
408
466
|
}
|
|
409
467
|
|
|
410
468
|
/* script */
|
|
411
|
-
const __vue_script__$1 = script
|
|
469
|
+
const __vue_script__$1 = script;
|
|
412
470
|
|
|
413
471
|
/* template */
|
|
414
472
|
var __vue_render__$1 = function () {
|
|
@@ -426,87 +484,121 @@
|
|
|
426
484
|
expression: "instance.isVisible",
|
|
427
485
|
},
|
|
428
486
|
],
|
|
429
|
-
class: ["zd-rich-text"
|
|
430
|
-
style: {
|
|
431
|
-
height: _vm.$formatSize(_vm.instance.height),
|
|
432
|
-
},
|
|
487
|
+
class: ["zd-rich-text"],
|
|
433
488
|
attrs: { id: _vm.instance.name, name: _vm.instance.name },
|
|
434
|
-
on: {
|
|
435
|
-
keydown: function ($event) {
|
|
436
|
-
return _vm.onKeyDown($event)
|
|
437
|
-
},
|
|
438
|
-
},
|
|
439
489
|
},
|
|
440
490
|
[
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
placeholder: _vm.instance.placeholder,
|
|
454
|
-
toolbar: _vm.readonly ? _vm.toolbarReadonly : _vm.toolbar,
|
|
455
|
-
rounded: "",
|
|
456
|
-
"max-width": _vm.instance.width,
|
|
457
|
-
extensions: _vm.extensions,
|
|
458
|
-
},
|
|
459
|
-
scopedSlots: _vm._u([
|
|
460
|
-
{
|
|
461
|
-
key: "editor",
|
|
462
|
-
fn: function (ref) {
|
|
463
|
-
var editor = ref.editor;
|
|
464
|
-
var attrs = ref.attrs;
|
|
465
|
-
return [
|
|
466
|
-
_c("editor-content", {
|
|
467
|
-
staticClass:
|
|
468
|
-
"vuetify-pro-tiptap-editor__content zd-rich-text-content markdown-theme-github",
|
|
469
|
-
class: [{ __dark: attrs.isDark }, attrs.editorClass],
|
|
470
|
-
style: attrs.contentDynamicStyles,
|
|
471
|
-
attrs: { editor: editor, "data-testid": "value" },
|
|
472
|
-
}),
|
|
491
|
+
_vm.instance.label
|
|
492
|
+
? _c("span", [
|
|
493
|
+
_c(
|
|
494
|
+
"label",
|
|
495
|
+
{
|
|
496
|
+
staticClass: "v-label v-label--active theme--light",
|
|
497
|
+
class: { "label--focused": _vm.isFocused },
|
|
498
|
+
},
|
|
499
|
+
[
|
|
500
|
+
_vm._v(
|
|
501
|
+
"\n " + _vm._s(_vm.$t(_vm.instance.label)) + "\n "
|
|
502
|
+
),
|
|
473
503
|
]
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
504
|
+
),
|
|
505
|
+
])
|
|
506
|
+
: _vm._e(),
|
|
507
|
+
_vm._v(" "),
|
|
508
|
+
_c(
|
|
509
|
+
"div",
|
|
510
|
+
{
|
|
511
|
+
class: ["zd-rich-text", "zd-elevation-2", _vm.instance.cssClass],
|
|
512
|
+
style: {
|
|
513
|
+
height: _vm.$formatSize(_vm.instance.height),
|
|
481
514
|
},
|
|
482
|
-
{
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
var editor = ref.editor;
|
|
486
|
-
var attrs = ref.attrs;
|
|
487
|
-
return [
|
|
488
|
-
_c("FontFamily", {
|
|
489
|
-
attrs: {
|
|
490
|
-
name: _vm.instance.name + "-fontFamily",
|
|
491
|
-
editor: editor,
|
|
492
|
-
attrs: attrs,
|
|
493
|
-
fonts: _vm.instance.fonts,
|
|
494
|
-
},
|
|
495
|
-
}),
|
|
496
|
-
]
|
|
515
|
+
on: {
|
|
516
|
+
keydown: function ($event) {
|
|
517
|
+
return _vm.onKeyDown($event)
|
|
497
518
|
},
|
|
498
519
|
},
|
|
499
|
-
]),
|
|
500
|
-
model: {
|
|
501
|
-
value: _vm.instance.content,
|
|
502
|
-
callback: function ($$v) {
|
|
503
|
-
_vm.$set(_vm.instance, "content", $$v);
|
|
504
|
-
},
|
|
505
|
-
expression: "instance.content",
|
|
506
520
|
},
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
521
|
+
[
|
|
522
|
+
_c("vuetify-tiptap", {
|
|
523
|
+
ref: "tiptap",
|
|
524
|
+
class: [
|
|
525
|
+
{ "zd-rich-text--disabled": _vm.instance.disabled },
|
|
526
|
+
_vm.readonly && !_vm.hasClass() && "zd-rich-text--readonly",
|
|
527
|
+
],
|
|
528
|
+
attrs: {
|
|
529
|
+
markdownTheme: false,
|
|
530
|
+
dark: _vm.instance.dark,
|
|
531
|
+
disabled: _vm.instance.disabled,
|
|
532
|
+
readonly: _vm.instance.readonly,
|
|
533
|
+
outlined: _vm.instance.outlined,
|
|
534
|
+
placeholder: _vm.instance.placeholder,
|
|
535
|
+
toolbar: _vm.readonly
|
|
536
|
+
? _vm.toolbarReadonly
|
|
537
|
+
: _vm.enableFullscreen
|
|
538
|
+
? _vm.toolbarFullscreen
|
|
539
|
+
: _vm.toolbar,
|
|
540
|
+
rounded: "",
|
|
541
|
+
"max-width": _vm.instance.width,
|
|
542
|
+
extensions: _vm.extensions,
|
|
543
|
+
},
|
|
544
|
+
on: {
|
|
545
|
+
onFocus: function ($event) {
|
|
546
|
+
return _vm.onFocus($event)
|
|
547
|
+
},
|
|
548
|
+
},
|
|
549
|
+
scopedSlots: _vm._u([
|
|
550
|
+
{
|
|
551
|
+
key: "editor",
|
|
552
|
+
fn: function (ref) {
|
|
553
|
+
var editor = ref.editor;
|
|
554
|
+
var attrs = ref.attrs;
|
|
555
|
+
return [
|
|
556
|
+
_c("editor-content", {
|
|
557
|
+
staticClass:
|
|
558
|
+
"vuetify-pro-tiptap-editor__content zd-rich-text-content markdown-theme-github",
|
|
559
|
+
class: [{ __dark: attrs.isDark }, attrs.editorClass],
|
|
560
|
+
style: attrs.contentDynamicStyles,
|
|
561
|
+
attrs: { editor: editor, "data-testid": "value" },
|
|
562
|
+
}),
|
|
563
|
+
]
|
|
564
|
+
},
|
|
565
|
+
},
|
|
566
|
+
{
|
|
567
|
+
key: "bottom",
|
|
568
|
+
fn: function (ref) {
|
|
569
|
+
return [_c("span")]
|
|
570
|
+
},
|
|
571
|
+
},
|
|
572
|
+
{
|
|
573
|
+
key: "fontFamily",
|
|
574
|
+
fn: function (ref) {
|
|
575
|
+
var editor = ref.editor;
|
|
576
|
+
var attrs = ref.attrs;
|
|
577
|
+
return [
|
|
578
|
+
_c("FontFamily", {
|
|
579
|
+
attrs: {
|
|
580
|
+
name: _vm.instance.name + "-fontFamily",
|
|
581
|
+
editor: editor,
|
|
582
|
+
attrs: attrs,
|
|
583
|
+
fonts: _vm.instance.fonts,
|
|
584
|
+
},
|
|
585
|
+
}),
|
|
586
|
+
]
|
|
587
|
+
},
|
|
588
|
+
},
|
|
589
|
+
]),
|
|
590
|
+
model: {
|
|
591
|
+
value: _vm.instance.content,
|
|
592
|
+
callback: function ($$v) {
|
|
593
|
+
_vm.$set(_vm.instance, "content", $$v);
|
|
594
|
+
},
|
|
595
|
+
expression: "instance.content",
|
|
596
|
+
},
|
|
597
|
+
}),
|
|
598
|
+
],
|
|
599
|
+
1
|
|
600
|
+
),
|
|
601
|
+
]
|
|
510
602
|
)
|
|
511
603
|
};
|
|
512
604
|
var __vue_staticRenderFns__$1 = [];
|
|
@@ -515,7 +607,7 @@
|
|
|
515
607
|
/* style */
|
|
516
608
|
const __vue_inject_styles__$1 = function (inject) {
|
|
517
609
|
if (!inject) return
|
|
518
|
-
inject("data-v-
|
|
610
|
+
inject("data-v-31adb996_0", { source: ".zd-rich-text #tippy-1 {\n display: none;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor--fullscreen .vuetify-pro-tiptap-editor__content {\n height: -webkit-fill-available;\n}\n.zd-rich-text .v-label {\n top: calc(-10px - var(--spacing-2));\n max-width: 100%;\n transform: none;\n font-size: var(--zd-font-body1-size);\n left: 0 !important;\n line-height: 15px;\n height: auto;\n font-weight: var(--zd-font-body1-weight);\n}\n.zd-rich-text .label--focused {\n transition: 0ms;\n color: var(--v-primary-base);\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
611
|
|
|
520
612
|
};
|
|
521
613
|
/* scoped */
|
|
@@ -543,36 +635,8 @@
|
|
|
543
635
|
undefined
|
|
544
636
|
);
|
|
545
637
|
|
|
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
638
|
/* script */
|
|
575
|
-
const __vue_script__ = script;
|
|
639
|
+
const __vue_script__ = script$1;
|
|
576
640
|
|
|
577
641
|
/* template */
|
|
578
642
|
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.
|
|
3
|
+
"version": "1.5.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",
|
|
@@ -31,5 +31,5 @@
|
|
|
31
31
|
"vue-class-component": "7.2.*",
|
|
32
32
|
"vue-property-decorator": "9.1.*"
|
|
33
33
|
},
|
|
34
|
-
"gitHead": "
|
|
34
|
+
"gitHead": "9ca7713e55a3c661d1b932c971fbfff56d3c4c34"
|
|
35
35
|
}
|
package/types/RichText.d.ts
CHANGED
|
@@ -9,18 +9,21 @@ export default class ZdRichText extends ZdComponentRender {
|
|
|
9
9
|
content: string;
|
|
10
10
|
cardColor: string;
|
|
11
11
|
fonts: IFonts[];
|
|
12
|
+
enableFullscreen: boolean;
|
|
12
13
|
outlined: boolean | string;
|
|
13
14
|
width: number | string;
|
|
14
15
|
height: number | string;
|
|
15
16
|
formatGetter: Object | string;
|
|
16
17
|
value: string;
|
|
17
18
|
fillHeight: boolean;
|
|
19
|
+
label: string;
|
|
18
20
|
instance: RichText;
|
|
19
21
|
instanceType: typeof RichText;
|
|
20
22
|
onKeyDown(event: KeyboardEvent): void;
|
|
21
23
|
changeLanguage(): void;
|
|
22
24
|
isMounted: boolean;
|
|
23
25
|
hasClass(): boolean;
|
|
26
|
+
isFocused: boolean;
|
|
24
27
|
extensions: import("@tiptap/vue-2").Extension<import("@tiptap/extension-font-family").FontFamilyOptions, any>[];
|
|
25
28
|
input(instanceInput: String): void;
|
|
26
29
|
private initialFocusValue?;
|
|
@@ -28,8 +31,9 @@ export default class ZdRichText extends ZdComponentRender {
|
|
|
28
31
|
onBlur(event: Event): void;
|
|
29
32
|
toolbar: import("vue").Ref<any[]>;
|
|
30
33
|
toolbarReadonly: import("vue").Ref<any[]>;
|
|
34
|
+
toolbarFullscreen: import("vue").Ref<any[]>;
|
|
31
35
|
created(): void;
|
|
32
36
|
mounted(): void;
|
|
33
37
|
setEditorDisabled(): void;
|
|
34
|
-
|
|
38
|
+
beforeDestroy(): void;
|
|
35
39
|
}
|