@zeedhi/zd-richtext-vue 1.5.1 → 1.5.3
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/dist/rich-text-vue.esm.js +167 -78
- package/dist/rich-text-vue.umd.js +166 -77
- package/package.json +2 -2
- package/types/RichText.d.ts +4 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { I18n, VersionService } from '@zeedhi/core';
|
|
2
|
-
import { PropWatch, ZdComponentRender,
|
|
2
|
+
import { PropWatch, ZdComponentRender, FillHeightMixin, Vuetify } from '@zeedhi/vuetify';
|
|
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';
|
|
@@ -74,6 +74,7 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
|
|
|
74
74
|
super(...arguments);
|
|
75
75
|
this.instanceType = RichText;
|
|
76
76
|
this.isMounted = false;
|
|
77
|
+
this.isFocused = false;
|
|
77
78
|
this.extensions = [FontFamily$1];
|
|
78
79
|
this.toolbar = ref([
|
|
79
80
|
'bold',
|
|
@@ -121,6 +122,49 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
|
|
|
121
122
|
this.toolbarReadonly = ref([
|
|
122
123
|
// 'bold',
|
|
123
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
|
+
]);
|
|
124
168
|
}
|
|
125
169
|
onKeyDown(event) {
|
|
126
170
|
this.instance.onKeyDown(this.$el, event.key);
|
|
@@ -140,12 +184,14 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
|
|
|
140
184
|
onFocus(event) {
|
|
141
185
|
this.instance.onFocus(event);
|
|
142
186
|
this.initialFocusValue = this.instance.content;
|
|
187
|
+
this.isFocused = true;
|
|
143
188
|
}
|
|
144
189
|
onBlur(event) {
|
|
145
190
|
this.instance.onBlur(event);
|
|
146
191
|
if (this.initialFocusValue !== this.instance.content) {
|
|
147
192
|
this.instance.onChange(this.instance.content);
|
|
148
193
|
}
|
|
194
|
+
this.isFocused = false;
|
|
149
195
|
}
|
|
150
196
|
created() {
|
|
151
197
|
if (!getInstalled()) {
|
|
@@ -170,9 +216,6 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
|
|
|
170
216
|
}
|
|
171
217
|
}
|
|
172
218
|
this.changeLanguage();
|
|
173
|
-
if (this.instance.fillHeight) {
|
|
174
|
-
setFillHeight(this.$el);
|
|
175
|
-
}
|
|
176
219
|
I18n.registerChangeListener(this.changeLanguage);
|
|
177
220
|
this.setEditorDisabled();
|
|
178
221
|
this.isMounted = true;
|
|
@@ -225,6 +268,10 @@ __decorate([
|
|
|
225
268
|
PropWatch({ type: Array, default: () => (fonts) }),
|
|
226
269
|
__metadata("design:type", Array)
|
|
227
270
|
], ZdRichText.prototype, "fonts", void 0);
|
|
271
|
+
__decorate([
|
|
272
|
+
PropWatch({ type: Boolean, default: false }),
|
|
273
|
+
__metadata("design:type", Boolean)
|
|
274
|
+
], ZdRichText.prototype, "enableFullscreen", void 0);
|
|
228
275
|
__decorate([
|
|
229
276
|
PropWatch({
|
|
230
277
|
type: [Boolean, String],
|
|
@@ -267,6 +314,13 @@ __decorate([
|
|
|
267
314
|
}),
|
|
268
315
|
__metadata("design:type", Boolean)
|
|
269
316
|
], ZdRichText.prototype, "fillHeight", void 0);
|
|
317
|
+
__decorate([
|
|
318
|
+
PropWatch({
|
|
319
|
+
type: String,
|
|
320
|
+
default: '',
|
|
321
|
+
}),
|
|
322
|
+
__metadata("design:type", String)
|
|
323
|
+
], ZdRichText.prototype, "label", void 0);
|
|
270
324
|
__decorate([
|
|
271
325
|
Watch('instance.content'),
|
|
272
326
|
__metadata("design:type", Function),
|
|
@@ -275,6 +329,7 @@ __decorate([
|
|
|
275
329
|
], ZdRichText.prototype, "input", null);
|
|
276
330
|
ZdRichText = __decorate([
|
|
277
331
|
Component$1({
|
|
332
|
+
mixins: [FillHeightMixin],
|
|
278
333
|
components: { EditorContent },
|
|
279
334
|
})
|
|
280
335
|
], ZdRichText);
|
|
@@ -427,87 +482,121 @@ var __vue_render__$1 = function () {
|
|
|
427
482
|
expression: "instance.isVisible",
|
|
428
483
|
},
|
|
429
484
|
],
|
|
430
|
-
class: ["zd-rich-text"
|
|
431
|
-
style: {
|
|
432
|
-
height: _vm.$formatSize(_vm.instance.height),
|
|
433
|
-
},
|
|
485
|
+
class: ["zd-rich-text"],
|
|
434
486
|
attrs: { id: _vm.instance.name, name: _vm.instance.name },
|
|
435
|
-
on: {
|
|
436
|
-
keydown: function ($event) {
|
|
437
|
-
return _vm.onKeyDown($event)
|
|
438
|
-
},
|
|
439
|
-
},
|
|
440
487
|
},
|
|
441
488
|
[
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
placeholder: _vm.instance.placeholder,
|
|
455
|
-
toolbar: _vm.readonly ? _vm.toolbarReadonly : _vm.toolbar,
|
|
456
|
-
rounded: "",
|
|
457
|
-
"max-width": _vm.instance.width,
|
|
458
|
-
extensions: _vm.extensions,
|
|
459
|
-
},
|
|
460
|
-
scopedSlots: _vm._u([
|
|
461
|
-
{
|
|
462
|
-
key: "editor",
|
|
463
|
-
fn: function (ref) {
|
|
464
|
-
var editor = ref.editor;
|
|
465
|
-
var attrs = ref.attrs;
|
|
466
|
-
return [
|
|
467
|
-
_c("editor-content", {
|
|
468
|
-
staticClass:
|
|
469
|
-
"vuetify-pro-tiptap-editor__content zd-rich-text-content markdown-theme-github",
|
|
470
|
-
class: [{ __dark: attrs.isDark }, attrs.editorClass],
|
|
471
|
-
style: attrs.contentDynamicStyles,
|
|
472
|
-
attrs: { editor: editor, "data-testid": "value" },
|
|
473
|
-
}),
|
|
489
|
+
_vm.instance.label
|
|
490
|
+
? _c("span", [
|
|
491
|
+
_c(
|
|
492
|
+
"label",
|
|
493
|
+
{
|
|
494
|
+
staticClass: "v-label v-label--active theme--light",
|
|
495
|
+
class: { "label--focused": _vm.isFocused },
|
|
496
|
+
},
|
|
497
|
+
[
|
|
498
|
+
_vm._v(
|
|
499
|
+
"\n " + _vm._s(_vm.$t(_vm.instance.label)) + "\n "
|
|
500
|
+
),
|
|
474
501
|
]
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
502
|
+
),
|
|
503
|
+
])
|
|
504
|
+
: _vm._e(),
|
|
505
|
+
_vm._v(" "),
|
|
506
|
+
_c(
|
|
507
|
+
"div",
|
|
508
|
+
{
|
|
509
|
+
class: ["zd-rich-text", "zd-elevation-2", _vm.instance.cssClass],
|
|
510
|
+
style: {
|
|
511
|
+
height: _vm.$formatSize(_vm.instance.height),
|
|
482
512
|
},
|
|
483
|
-
{
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
var editor = ref.editor;
|
|
487
|
-
var attrs = ref.attrs;
|
|
488
|
-
return [
|
|
489
|
-
_c("FontFamily", {
|
|
490
|
-
attrs: {
|
|
491
|
-
name: _vm.instance.name + "-fontFamily",
|
|
492
|
-
editor: editor,
|
|
493
|
-
attrs: attrs,
|
|
494
|
-
fonts: _vm.instance.fonts,
|
|
495
|
-
},
|
|
496
|
-
}),
|
|
497
|
-
]
|
|
513
|
+
on: {
|
|
514
|
+
keydown: function ($event) {
|
|
515
|
+
return _vm.onKeyDown($event)
|
|
498
516
|
},
|
|
499
517
|
},
|
|
500
|
-
]),
|
|
501
|
-
model: {
|
|
502
|
-
value: _vm.instance.content,
|
|
503
|
-
callback: function ($$v) {
|
|
504
|
-
_vm.$set(_vm.instance, "content", $$v);
|
|
505
|
-
},
|
|
506
|
-
expression: "instance.content",
|
|
507
518
|
},
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
519
|
+
[
|
|
520
|
+
_c("vuetify-tiptap", {
|
|
521
|
+
ref: "tiptap",
|
|
522
|
+
class: [
|
|
523
|
+
{ "zd-rich-text--disabled": _vm.instance.disabled },
|
|
524
|
+
_vm.readonly && !_vm.hasClass() && "zd-rich-text--readonly",
|
|
525
|
+
],
|
|
526
|
+
attrs: {
|
|
527
|
+
markdownTheme: false,
|
|
528
|
+
dark: _vm.instance.dark,
|
|
529
|
+
disabled: _vm.instance.disabled,
|
|
530
|
+
readonly: _vm.instance.readonly,
|
|
531
|
+
outlined: _vm.instance.outlined,
|
|
532
|
+
placeholder: _vm.instance.placeholder,
|
|
533
|
+
toolbar: _vm.readonly
|
|
534
|
+
? _vm.toolbarReadonly
|
|
535
|
+
: _vm.enableFullscreen
|
|
536
|
+
? _vm.toolbarFullscreen
|
|
537
|
+
: _vm.toolbar,
|
|
538
|
+
rounded: "",
|
|
539
|
+
"max-width": _vm.instance.width,
|
|
540
|
+
extensions: _vm.extensions,
|
|
541
|
+
},
|
|
542
|
+
on: {
|
|
543
|
+
onFocus: function ($event) {
|
|
544
|
+
return _vm.onFocus($event)
|
|
545
|
+
},
|
|
546
|
+
},
|
|
547
|
+
scopedSlots: _vm._u([
|
|
548
|
+
{
|
|
549
|
+
key: "editor",
|
|
550
|
+
fn: function (ref) {
|
|
551
|
+
var editor = ref.editor;
|
|
552
|
+
var attrs = ref.attrs;
|
|
553
|
+
return [
|
|
554
|
+
_c("editor-content", {
|
|
555
|
+
staticClass:
|
|
556
|
+
"vuetify-pro-tiptap-editor__content zd-rich-text-content markdown-theme-github",
|
|
557
|
+
class: [{ __dark: attrs.isDark }, attrs.editorClass],
|
|
558
|
+
style: attrs.contentDynamicStyles,
|
|
559
|
+
attrs: { editor: editor, "data-testid": "value" },
|
|
560
|
+
}),
|
|
561
|
+
]
|
|
562
|
+
},
|
|
563
|
+
},
|
|
564
|
+
{
|
|
565
|
+
key: "bottom",
|
|
566
|
+
fn: function (ref) {
|
|
567
|
+
return [_c("span")]
|
|
568
|
+
},
|
|
569
|
+
},
|
|
570
|
+
{
|
|
571
|
+
key: "fontFamily",
|
|
572
|
+
fn: function (ref) {
|
|
573
|
+
var editor = ref.editor;
|
|
574
|
+
var attrs = ref.attrs;
|
|
575
|
+
return [
|
|
576
|
+
_c("FontFamily", {
|
|
577
|
+
attrs: {
|
|
578
|
+
name: _vm.instance.name + "-fontFamily",
|
|
579
|
+
editor: editor,
|
|
580
|
+
attrs: attrs,
|
|
581
|
+
fonts: _vm.instance.fonts,
|
|
582
|
+
},
|
|
583
|
+
}),
|
|
584
|
+
]
|
|
585
|
+
},
|
|
586
|
+
},
|
|
587
|
+
]),
|
|
588
|
+
model: {
|
|
589
|
+
value: _vm.instance.content,
|
|
590
|
+
callback: function ($$v) {
|
|
591
|
+
_vm.$set(_vm.instance, "content", $$v);
|
|
592
|
+
},
|
|
593
|
+
expression: "instance.content",
|
|
594
|
+
},
|
|
595
|
+
}),
|
|
596
|
+
],
|
|
597
|
+
1
|
|
598
|
+
),
|
|
599
|
+
]
|
|
511
600
|
)
|
|
512
601
|
};
|
|
513
602
|
var __vue_staticRenderFns__$1 = [];
|
|
@@ -516,7 +605,7 @@ __vue_render__$1._withStripped = true;
|
|
|
516
605
|
/* style */
|
|
517
606
|
const __vue_inject_styles__$1 = function (inject) {
|
|
518
607
|
if (!inject) return
|
|
519
|
-
inject("data-v-
|
|
608
|
+
inject("data-v-58cf5ffa_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 });
|
|
520
609
|
|
|
521
610
|
};
|
|
522
611
|
/* scoped */
|
|
@@ -74,6 +74,7 @@
|
|
|
74
74
|
super(...arguments);
|
|
75
75
|
this.instanceType = zdRichtextCommon.RichText;
|
|
76
76
|
this.isMounted = false;
|
|
77
|
+
this.isFocused = false;
|
|
77
78
|
this.extensions = [extensionFontFamily.FontFamily];
|
|
78
79
|
this.toolbar = Vue.ref([
|
|
79
80
|
'bold',
|
|
@@ -121,6 +122,49 @@
|
|
|
121
122
|
this.toolbarReadonly = Vue.ref([
|
|
122
123
|
// 'bold',
|
|
123
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
|
+
]);
|
|
124
168
|
}
|
|
125
169
|
onKeyDown(event) {
|
|
126
170
|
this.instance.onKeyDown(this.$el, event.key);
|
|
@@ -140,12 +184,14 @@
|
|
|
140
184
|
onFocus(event) {
|
|
141
185
|
this.instance.onFocus(event);
|
|
142
186
|
this.initialFocusValue = this.instance.content;
|
|
187
|
+
this.isFocused = true;
|
|
143
188
|
}
|
|
144
189
|
onBlur(event) {
|
|
145
190
|
this.instance.onBlur(event);
|
|
146
191
|
if (this.initialFocusValue !== this.instance.content) {
|
|
147
192
|
this.instance.onChange(this.instance.content);
|
|
148
193
|
}
|
|
194
|
+
this.isFocused = false;
|
|
149
195
|
}
|
|
150
196
|
created() {
|
|
151
197
|
if (!getInstalled()) {
|
|
@@ -170,9 +216,6 @@
|
|
|
170
216
|
}
|
|
171
217
|
}
|
|
172
218
|
this.changeLanguage();
|
|
173
|
-
if (this.instance.fillHeight) {
|
|
174
|
-
vuetify$1.setFillHeight(this.$el);
|
|
175
|
-
}
|
|
176
219
|
core.I18n.registerChangeListener(this.changeLanguage);
|
|
177
220
|
this.setEditorDisabled();
|
|
178
221
|
this.isMounted = true;
|
|
@@ -225,6 +268,10 @@
|
|
|
225
268
|
vuetify$1.PropWatch({ type: Array, default: () => (fonts) }),
|
|
226
269
|
__metadata("design:type", Array)
|
|
227
270
|
], ZdRichText.prototype, "fonts", void 0);
|
|
271
|
+
__decorate([
|
|
272
|
+
vuetify$1.PropWatch({ type: Boolean, default: false }),
|
|
273
|
+
__metadata("design:type", Boolean)
|
|
274
|
+
], ZdRichText.prototype, "enableFullscreen", void 0);
|
|
228
275
|
__decorate([
|
|
229
276
|
vuetify$1.PropWatch({
|
|
230
277
|
type: [Boolean, String],
|
|
@@ -267,6 +314,13 @@
|
|
|
267
314
|
}),
|
|
268
315
|
__metadata("design:type", Boolean)
|
|
269
316
|
], ZdRichText.prototype, "fillHeight", void 0);
|
|
317
|
+
__decorate([
|
|
318
|
+
vuetify$1.PropWatch({
|
|
319
|
+
type: String,
|
|
320
|
+
default: '',
|
|
321
|
+
}),
|
|
322
|
+
__metadata("design:type", String)
|
|
323
|
+
], ZdRichText.prototype, "label", void 0);
|
|
270
324
|
__decorate([
|
|
271
325
|
vuePropertyDecorator.Watch('instance.content'),
|
|
272
326
|
__metadata("design:type", Function),
|
|
@@ -275,6 +329,7 @@
|
|
|
275
329
|
], ZdRichText.prototype, "input", null);
|
|
276
330
|
ZdRichText = __decorate([
|
|
277
331
|
vuePropertyDecorator.Component({
|
|
332
|
+
mixins: [vuetify$1.FillHeightMixin],
|
|
278
333
|
components: { EditorContent: vue2.EditorContent },
|
|
279
334
|
})
|
|
280
335
|
], ZdRichText);
|
|
@@ -427,87 +482,121 @@
|
|
|
427
482
|
expression: "instance.isVisible",
|
|
428
483
|
},
|
|
429
484
|
],
|
|
430
|
-
class: ["zd-rich-text"
|
|
431
|
-
style: {
|
|
432
|
-
height: _vm.$formatSize(_vm.instance.height),
|
|
433
|
-
},
|
|
485
|
+
class: ["zd-rich-text"],
|
|
434
486
|
attrs: { id: _vm.instance.name, name: _vm.instance.name },
|
|
435
|
-
on: {
|
|
436
|
-
keydown: function ($event) {
|
|
437
|
-
return _vm.onKeyDown($event)
|
|
438
|
-
},
|
|
439
|
-
},
|
|
440
487
|
},
|
|
441
488
|
[
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
placeholder: _vm.instance.placeholder,
|
|
455
|
-
toolbar: _vm.readonly ? _vm.toolbarReadonly : _vm.toolbar,
|
|
456
|
-
rounded: "",
|
|
457
|
-
"max-width": _vm.instance.width,
|
|
458
|
-
extensions: _vm.extensions,
|
|
459
|
-
},
|
|
460
|
-
scopedSlots: _vm._u([
|
|
461
|
-
{
|
|
462
|
-
key: "editor",
|
|
463
|
-
fn: function (ref) {
|
|
464
|
-
var editor = ref.editor;
|
|
465
|
-
var attrs = ref.attrs;
|
|
466
|
-
return [
|
|
467
|
-
_c("editor-content", {
|
|
468
|
-
staticClass:
|
|
469
|
-
"vuetify-pro-tiptap-editor__content zd-rich-text-content markdown-theme-github",
|
|
470
|
-
class: [{ __dark: attrs.isDark }, attrs.editorClass],
|
|
471
|
-
style: attrs.contentDynamicStyles,
|
|
472
|
-
attrs: { editor: editor, "data-testid": "value" },
|
|
473
|
-
}),
|
|
489
|
+
_vm.instance.label
|
|
490
|
+
? _c("span", [
|
|
491
|
+
_c(
|
|
492
|
+
"label",
|
|
493
|
+
{
|
|
494
|
+
staticClass: "v-label v-label--active theme--light",
|
|
495
|
+
class: { "label--focused": _vm.isFocused },
|
|
496
|
+
},
|
|
497
|
+
[
|
|
498
|
+
_vm._v(
|
|
499
|
+
"\n " + _vm._s(_vm.$t(_vm.instance.label)) + "\n "
|
|
500
|
+
),
|
|
474
501
|
]
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
502
|
+
),
|
|
503
|
+
])
|
|
504
|
+
: _vm._e(),
|
|
505
|
+
_vm._v(" "),
|
|
506
|
+
_c(
|
|
507
|
+
"div",
|
|
508
|
+
{
|
|
509
|
+
class: ["zd-rich-text", "zd-elevation-2", _vm.instance.cssClass],
|
|
510
|
+
style: {
|
|
511
|
+
height: _vm.$formatSize(_vm.instance.height),
|
|
482
512
|
},
|
|
483
|
-
{
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
var editor = ref.editor;
|
|
487
|
-
var attrs = ref.attrs;
|
|
488
|
-
return [
|
|
489
|
-
_c("FontFamily", {
|
|
490
|
-
attrs: {
|
|
491
|
-
name: _vm.instance.name + "-fontFamily",
|
|
492
|
-
editor: editor,
|
|
493
|
-
attrs: attrs,
|
|
494
|
-
fonts: _vm.instance.fonts,
|
|
495
|
-
},
|
|
496
|
-
}),
|
|
497
|
-
]
|
|
513
|
+
on: {
|
|
514
|
+
keydown: function ($event) {
|
|
515
|
+
return _vm.onKeyDown($event)
|
|
498
516
|
},
|
|
499
517
|
},
|
|
500
|
-
]),
|
|
501
|
-
model: {
|
|
502
|
-
value: _vm.instance.content,
|
|
503
|
-
callback: function ($$v) {
|
|
504
|
-
_vm.$set(_vm.instance, "content", $$v);
|
|
505
|
-
},
|
|
506
|
-
expression: "instance.content",
|
|
507
518
|
},
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
519
|
+
[
|
|
520
|
+
_c("vuetify-tiptap", {
|
|
521
|
+
ref: "tiptap",
|
|
522
|
+
class: [
|
|
523
|
+
{ "zd-rich-text--disabled": _vm.instance.disabled },
|
|
524
|
+
_vm.readonly && !_vm.hasClass() && "zd-rich-text--readonly",
|
|
525
|
+
],
|
|
526
|
+
attrs: {
|
|
527
|
+
markdownTheme: false,
|
|
528
|
+
dark: _vm.instance.dark,
|
|
529
|
+
disabled: _vm.instance.disabled,
|
|
530
|
+
readonly: _vm.instance.readonly,
|
|
531
|
+
outlined: _vm.instance.outlined,
|
|
532
|
+
placeholder: _vm.instance.placeholder,
|
|
533
|
+
toolbar: _vm.readonly
|
|
534
|
+
? _vm.toolbarReadonly
|
|
535
|
+
: _vm.enableFullscreen
|
|
536
|
+
? _vm.toolbarFullscreen
|
|
537
|
+
: _vm.toolbar,
|
|
538
|
+
rounded: "",
|
|
539
|
+
"max-width": _vm.instance.width,
|
|
540
|
+
extensions: _vm.extensions,
|
|
541
|
+
},
|
|
542
|
+
on: {
|
|
543
|
+
onFocus: function ($event) {
|
|
544
|
+
return _vm.onFocus($event)
|
|
545
|
+
},
|
|
546
|
+
},
|
|
547
|
+
scopedSlots: _vm._u([
|
|
548
|
+
{
|
|
549
|
+
key: "editor",
|
|
550
|
+
fn: function (ref) {
|
|
551
|
+
var editor = ref.editor;
|
|
552
|
+
var attrs = ref.attrs;
|
|
553
|
+
return [
|
|
554
|
+
_c("editor-content", {
|
|
555
|
+
staticClass:
|
|
556
|
+
"vuetify-pro-tiptap-editor__content zd-rich-text-content markdown-theme-github",
|
|
557
|
+
class: [{ __dark: attrs.isDark }, attrs.editorClass],
|
|
558
|
+
style: attrs.contentDynamicStyles,
|
|
559
|
+
attrs: { editor: editor, "data-testid": "value" },
|
|
560
|
+
}),
|
|
561
|
+
]
|
|
562
|
+
},
|
|
563
|
+
},
|
|
564
|
+
{
|
|
565
|
+
key: "bottom",
|
|
566
|
+
fn: function (ref) {
|
|
567
|
+
return [_c("span")]
|
|
568
|
+
},
|
|
569
|
+
},
|
|
570
|
+
{
|
|
571
|
+
key: "fontFamily",
|
|
572
|
+
fn: function (ref) {
|
|
573
|
+
var editor = ref.editor;
|
|
574
|
+
var attrs = ref.attrs;
|
|
575
|
+
return [
|
|
576
|
+
_c("FontFamily", {
|
|
577
|
+
attrs: {
|
|
578
|
+
name: _vm.instance.name + "-fontFamily",
|
|
579
|
+
editor: editor,
|
|
580
|
+
attrs: attrs,
|
|
581
|
+
fonts: _vm.instance.fonts,
|
|
582
|
+
},
|
|
583
|
+
}),
|
|
584
|
+
]
|
|
585
|
+
},
|
|
586
|
+
},
|
|
587
|
+
]),
|
|
588
|
+
model: {
|
|
589
|
+
value: _vm.instance.content,
|
|
590
|
+
callback: function ($$v) {
|
|
591
|
+
_vm.$set(_vm.instance, "content", $$v);
|
|
592
|
+
},
|
|
593
|
+
expression: "instance.content",
|
|
594
|
+
},
|
|
595
|
+
}),
|
|
596
|
+
],
|
|
597
|
+
1
|
|
598
|
+
),
|
|
599
|
+
]
|
|
511
600
|
)
|
|
512
601
|
};
|
|
513
602
|
var __vue_staticRenderFns__$1 = [];
|
|
@@ -516,7 +605,7 @@
|
|
|
516
605
|
/* style */
|
|
517
606
|
const __vue_inject_styles__$1 = function (inject) {
|
|
518
607
|
if (!inject) return
|
|
519
|
-
inject("data-v-
|
|
608
|
+
inject("data-v-58cf5ffa_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 });
|
|
520
609
|
|
|
521
610
|
};
|
|
522
611
|
/* scoped */
|
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.3",
|
|
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": "8836006ea62574c8f60d2efc40a411b02bafa569"
|
|
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,6 +31,7 @@ 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;
|