@vueup/vue-quill 1.2.1 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/vue-quill.bubble.css +188 -91
- package/dist/vue-quill.bubble.prod.css +1 -1
- package/dist/vue-quill.cjs.js +431 -373
- package/dist/vue-quill.cjs.prod.js +4 -4
- package/dist/vue-quill.core.css +172 -81
- package/dist/vue-quill.core.prod.css +1 -1
- package/dist/vue-quill.d.ts +31 -25
- package/dist/vue-quill.esm-browser.js +16079 -18142
- package/dist/vue-quill.esm-browser.prod.js +4 -4
- package/dist/vue-quill.esm-bundler.js +430 -368
- package/dist/vue-quill.esm-bundler.prod.js +4 -4
- package/dist/vue-quill.global.js +16718 -18781
- package/dist/vue-quill.global.prod.js +4 -4
- package/package.json +3 -3
package/dist/vue-quill.cjs.js
CHANGED
|
@@ -1,394 +1,452 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* VueQuill @vueup/vue-quill v1.
|
|
2
|
+
* VueQuill @vueup/vue-quill v1.4.0
|
|
3
3
|
* https://vueup.github.io/vue-quill/
|
|
4
4
|
*
|
|
5
|
-
* Includes quill
|
|
5
|
+
* Includes quill v2.0.2 || >=2.0.4 <3
|
|
6
6
|
* https://quilljs.com/
|
|
7
7
|
*
|
|
8
8
|
* Copyright (c) 2026 Ahmad Luthfi Masruri
|
|
9
9
|
* Released under the MIT license
|
|
10
|
-
* Date: 2026-06-
|
|
10
|
+
* Date: 2026-06-02T00:10:10.011Z
|
|
11
11
|
*/
|
|
12
12
|
'use strict';
|
|
13
13
|
|
|
14
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
15
|
-
|
|
16
|
-
var Quill = require('quill');
|
|
17
14
|
var Delta = require('quill-delta');
|
|
18
15
|
var vue = require('vue');
|
|
19
16
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
17
|
+
const toolbarOptions = {
|
|
18
|
+
essential: [
|
|
19
|
+
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
|
20
|
+
['bold', 'italic', 'underline'],
|
|
21
|
+
[{ list: 'ordered' }, { list: 'bullet' }, { align: [] }],
|
|
22
|
+
['blockquote', 'code-block', 'link'],
|
|
23
|
+
[{ color: [] }, 'clean'],
|
|
24
|
+
],
|
|
25
|
+
minimal: [
|
|
26
|
+
[{ header: 1 }, { header: 2 }],
|
|
27
|
+
['bold', 'italic', 'underline'],
|
|
28
|
+
[{ list: 'ordered' }, { list: 'bullet' }, { align: [] }],
|
|
29
|
+
],
|
|
30
|
+
full: [
|
|
31
|
+
['bold', 'italic', 'underline', 'strike'], // toggled buttons
|
|
32
|
+
['blockquote', 'code-block'],
|
|
33
|
+
[{ header: 1 }, { header: 2 }], // custom button values
|
|
34
|
+
[{ list: 'ordered' }, { list: 'bullet' }],
|
|
35
|
+
[{ script: 'sub' }, { script: 'super' }], // superscript/subscript
|
|
36
|
+
[{ indent: '-1' }, { indent: '+1' }], // outdent/indent
|
|
37
|
+
[{ direction: 'rtl' }], // text direction
|
|
38
|
+
[{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
|
|
39
|
+
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
|
40
|
+
[{ color: [] }, { background: [] }], // dropdown with defaults from theme
|
|
41
|
+
[{ font: [] }],
|
|
42
|
+
[{ align: [] }],
|
|
43
|
+
['link', 'video', 'image'],
|
|
44
|
+
['clean'], // remove formatting button
|
|
45
|
+
],
|
|
46
|
+
};
|
|
24
47
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
['bold', 'italic', 'underline'],
|
|
36
|
-
[{ list: 'ordered' }, { list: 'bullet' }, { align: [] }],
|
|
37
|
-
],
|
|
38
|
-
full: [
|
|
39
|
-
['bold', 'italic', 'underline', 'strike'],
|
|
40
|
-
['blockquote', 'code-block'],
|
|
41
|
-
[{ header: 1 }, { header: 2 }],
|
|
42
|
-
[{ list: 'ordered' }, { list: 'bullet' }],
|
|
43
|
-
[{ script: 'sub' }, { script: 'super' }],
|
|
44
|
-
[{ indent: '-1' }, { indent: '+1' }],
|
|
45
|
-
[{ direction: 'rtl' }],
|
|
46
|
-
[{ size: ['small', false, 'large', 'huge'] }],
|
|
47
|
-
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
|
48
|
-
[{ color: [] }, { background: [] }],
|
|
49
|
-
[{ font: [] }],
|
|
50
|
-
[{ align: [] }],
|
|
51
|
-
['link', 'video', 'image'],
|
|
52
|
-
['clean'], // remove formatting button
|
|
53
|
-
],
|
|
48
|
+
let loadedQuill;
|
|
49
|
+
let quillLoadPromise;
|
|
50
|
+
let pendingRegistrations = [];
|
|
51
|
+
const isBrowser = () => typeof document !== 'undefined';
|
|
52
|
+
const replayPendingRegistrations = (Quill) => {
|
|
53
|
+
const registrations = pendingRegistrations;
|
|
54
|
+
pendingRegistrations = [];
|
|
55
|
+
for (const args of registrations) {
|
|
56
|
+
Quill.register(...args);
|
|
57
|
+
}
|
|
54
58
|
};
|
|
59
|
+
const loadQuill = async () => {
|
|
60
|
+
if (loadedQuill)
|
|
61
|
+
return loadedQuill;
|
|
62
|
+
if (!isBrowser()) {
|
|
63
|
+
throw new Error('@vueup/vue-quill: Quill can only be loaded in a browser environment.');
|
|
64
|
+
}
|
|
65
|
+
quillLoadPromise !== null && quillLoadPromise !== void 0 ? quillLoadPromise : (quillLoadPromise = import('quill').then(({ default: Quill }) => {
|
|
66
|
+
loadedQuill = Quill;
|
|
67
|
+
replayPendingRegistrations(Quill);
|
|
68
|
+
return Quill;
|
|
69
|
+
}));
|
|
70
|
+
return quillLoadPromise;
|
|
71
|
+
};
|
|
72
|
+
const getLoadedQuill = () => loadedQuill;
|
|
73
|
+
const getQuillOrThrow = () => {
|
|
74
|
+
if (loadedQuill)
|
|
75
|
+
return loadedQuill;
|
|
76
|
+
throw new Error('@vueup/vue-quill: Quill is not loaded yet. Use loadQuill() in a browser-only lifecycle hook, or access the Quill instance from the ready event.');
|
|
77
|
+
};
|
|
78
|
+
const Quill = new Proxy(function QuillProxy() { }, {
|
|
79
|
+
get(_target, property) {
|
|
80
|
+
if (property === 'register') {
|
|
81
|
+
return (...args) => {
|
|
82
|
+
if (loadedQuill) {
|
|
83
|
+
return loadedQuill.register(...args);
|
|
84
|
+
}
|
|
85
|
+
pendingRegistrations.push(args);
|
|
86
|
+
if (isBrowser())
|
|
87
|
+
void loadQuill();
|
|
88
|
+
};
|
|
89
|
+
}
|
|
90
|
+
const Quill = getQuillOrThrow();
|
|
91
|
+
const value = Quill[property];
|
|
92
|
+
return typeof value === 'function' ? value.bind(Quill) : value;
|
|
93
|
+
},
|
|
94
|
+
construct(_target, args) {
|
|
95
|
+
const Quill = getQuillOrThrow();
|
|
96
|
+
return new Quill(...args);
|
|
97
|
+
},
|
|
98
|
+
});
|
|
55
99
|
|
|
56
|
-
const QuillEditor = vue.defineComponent({
|
|
57
|
-
name: 'QuillEditor',
|
|
58
|
-
inheritAttrs: false,
|
|
59
|
-
props: {
|
|
60
|
-
content: {
|
|
61
|
-
type: [String, Object],
|
|
62
|
-
},
|
|
63
|
-
contentType: {
|
|
64
|
-
type: String,
|
|
65
|
-
default: 'delta',
|
|
66
|
-
validator: (value) => {
|
|
67
|
-
return ['delta', 'html', 'text'].includes(value);
|
|
68
|
-
},
|
|
69
|
-
},
|
|
70
|
-
enable: {
|
|
71
|
-
type: Boolean,
|
|
72
|
-
default: true,
|
|
73
|
-
},
|
|
74
|
-
readOnly: {
|
|
75
|
-
type: Boolean,
|
|
76
|
-
default: false,
|
|
77
|
-
},
|
|
78
|
-
placeholder: {
|
|
79
|
-
type: String,
|
|
80
|
-
required: false,
|
|
81
|
-
},
|
|
82
|
-
theme: {
|
|
83
|
-
type: String,
|
|
84
|
-
default: 'snow',
|
|
85
|
-
validator: (value) => {
|
|
86
|
-
return ['snow', 'bubble', ''].includes(value);
|
|
87
|
-
},
|
|
88
|
-
},
|
|
89
|
-
toolbar: {
|
|
90
|
-
type: [String, Array, Object],
|
|
91
|
-
required: false,
|
|
92
|
-
validator: (value) => {
|
|
93
|
-
if (typeof value === 'string' && value !== '') {
|
|
94
|
-
return value.charAt(0) === '#'
|
|
95
|
-
? true
|
|
96
|
-
: Object.keys(toolbarOptions).indexOf(value) !== -1;
|
|
97
|
-
}
|
|
98
|
-
return true;
|
|
99
|
-
},
|
|
100
|
-
},
|
|
101
|
-
modules: {
|
|
102
|
-
type: Object,
|
|
103
|
-
required: false,
|
|
104
|
-
},
|
|
105
|
-
options: {
|
|
106
|
-
type: Object,
|
|
107
|
-
required: false,
|
|
108
|
-
},
|
|
109
|
-
globalOptions: {
|
|
110
|
-
type: Object,
|
|
111
|
-
required: false,
|
|
112
|
-
},
|
|
113
|
-
},
|
|
114
|
-
emits: [
|
|
115
|
-
'textChange',
|
|
116
|
-
'selectionChange',
|
|
117
|
-
'editorChange',
|
|
118
|
-
'update:content',
|
|
119
|
-
'focus',
|
|
120
|
-
'blur',
|
|
121
|
-
'ready',
|
|
122
|
-
],
|
|
123
|
-
setup: (props, ctx) => {
|
|
124
|
-
vue.onMounted(() => {
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
(
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
if (props.
|
|
189
|
-
clientOptions.
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
return Object.
|
|
227
|
-
};
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
const
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
100
|
+
const QuillEditor = vue.defineComponent({
|
|
101
|
+
name: 'QuillEditor',
|
|
102
|
+
inheritAttrs: false,
|
|
103
|
+
props: {
|
|
104
|
+
content: {
|
|
105
|
+
type: [String, Object],
|
|
106
|
+
},
|
|
107
|
+
contentType: {
|
|
108
|
+
type: String,
|
|
109
|
+
default: 'delta',
|
|
110
|
+
validator: (value) => {
|
|
111
|
+
return ['delta', 'html', 'text'].includes(value);
|
|
112
|
+
},
|
|
113
|
+
},
|
|
114
|
+
enable: {
|
|
115
|
+
type: Boolean,
|
|
116
|
+
default: true,
|
|
117
|
+
},
|
|
118
|
+
readOnly: {
|
|
119
|
+
type: Boolean,
|
|
120
|
+
default: false,
|
|
121
|
+
},
|
|
122
|
+
placeholder: {
|
|
123
|
+
type: String,
|
|
124
|
+
required: false,
|
|
125
|
+
},
|
|
126
|
+
theme: {
|
|
127
|
+
type: String,
|
|
128
|
+
default: 'snow',
|
|
129
|
+
validator: (value) => {
|
|
130
|
+
return ['snow', 'bubble', ''].includes(value);
|
|
131
|
+
},
|
|
132
|
+
},
|
|
133
|
+
toolbar: {
|
|
134
|
+
type: [String, Array, Object],
|
|
135
|
+
required: false,
|
|
136
|
+
validator: (value) => {
|
|
137
|
+
if (typeof value === 'string' && value !== '') {
|
|
138
|
+
return value.charAt(0) === '#'
|
|
139
|
+
? true
|
|
140
|
+
: Object.keys(toolbarOptions).indexOf(value) !== -1;
|
|
141
|
+
}
|
|
142
|
+
return true;
|
|
143
|
+
},
|
|
144
|
+
},
|
|
145
|
+
modules: {
|
|
146
|
+
type: Object,
|
|
147
|
+
required: false,
|
|
148
|
+
},
|
|
149
|
+
options: {
|
|
150
|
+
type: Object,
|
|
151
|
+
required: false,
|
|
152
|
+
},
|
|
153
|
+
globalOptions: {
|
|
154
|
+
type: Object,
|
|
155
|
+
required: false,
|
|
156
|
+
},
|
|
157
|
+
},
|
|
158
|
+
emits: [
|
|
159
|
+
'textChange',
|
|
160
|
+
'selectionChange',
|
|
161
|
+
'editorChange',
|
|
162
|
+
'update:content',
|
|
163
|
+
'focus',
|
|
164
|
+
'blur',
|
|
165
|
+
'ready',
|
|
166
|
+
],
|
|
167
|
+
setup: (props, ctx) => {
|
|
168
|
+
vue.onMounted(() => {
|
|
169
|
+
isUnmounted = false;
|
|
170
|
+
void initialize();
|
|
171
|
+
});
|
|
172
|
+
vue.onBeforeUnmount(() => {
|
|
173
|
+
quill = null;
|
|
174
|
+
isUnmounted = true;
|
|
175
|
+
});
|
|
176
|
+
let isUnmounted = false;
|
|
177
|
+
let quill;
|
|
178
|
+
let options;
|
|
179
|
+
const editor = vue.ref();
|
|
180
|
+
// Register Module if not already registered
|
|
181
|
+
const registerModule = (Quill, moduleName, module) => {
|
|
182
|
+
const quillImports = Quill.imports;
|
|
183
|
+
if (quillImports && moduleName in quillImports) {
|
|
184
|
+
return;
|
|
185
|
+
}
|
|
186
|
+
Quill.register(moduleName, module);
|
|
187
|
+
};
|
|
188
|
+
// Initialize Quill
|
|
189
|
+
const initialize = async () => {
|
|
190
|
+
var _a, _b;
|
|
191
|
+
if (!editor.value)
|
|
192
|
+
return;
|
|
193
|
+
const editorElement = editor.value;
|
|
194
|
+
const Quill = await loadQuill();
|
|
195
|
+
if (isUnmounted || !editor.value || editor.value !== editorElement)
|
|
196
|
+
return;
|
|
197
|
+
options = composeOptions();
|
|
198
|
+
// Register modules
|
|
199
|
+
if (props.modules) {
|
|
200
|
+
if (Array.isArray(props.modules)) {
|
|
201
|
+
for (const module of props.modules) {
|
|
202
|
+
registerModule(Quill, `modules/${module.name}`, module.module);
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
else {
|
|
206
|
+
registerModule(Quill, `modules/${props.modules.name}`, props.modules.module);
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
// Create new Quill instance
|
|
210
|
+
quill = new Quill(editor.value, options);
|
|
211
|
+
// Set editor content
|
|
212
|
+
setContents(props.content);
|
|
213
|
+
// Set event handlers
|
|
214
|
+
quill.on('text-change', handleTextChange);
|
|
215
|
+
quill.on('selection-change', handleSelectionChange);
|
|
216
|
+
quill.on('editor-change', handleEditorChange);
|
|
217
|
+
// Remove editor class when theme changes
|
|
218
|
+
if (props.theme !== 'bubble')
|
|
219
|
+
editor.value.classList.remove('ql-bubble');
|
|
220
|
+
if (props.theme !== 'snow')
|
|
221
|
+
editor.value.classList.remove('ql-snow');
|
|
222
|
+
// Fix clicking the quill toolbar is detected as blur event
|
|
223
|
+
(_b = (_a = getToolbarModule()) === null || _a === void 0 ? void 0 : _a.container) === null || _b === void 0 ? void 0 : _b.addEventListener('mousedown', (e) => {
|
|
224
|
+
e.preventDefault();
|
|
225
|
+
});
|
|
226
|
+
// Emit ready event
|
|
227
|
+
ctx.emit('ready', quill);
|
|
228
|
+
};
|
|
229
|
+
// Compose Options
|
|
230
|
+
const composeOptions = () => {
|
|
231
|
+
const clientOptions = {};
|
|
232
|
+
if (props.theme !== '')
|
|
233
|
+
clientOptions.theme = props.theme;
|
|
234
|
+
if (props.readOnly)
|
|
235
|
+
clientOptions.readOnly = props.readOnly;
|
|
236
|
+
if (props.placeholder)
|
|
237
|
+
clientOptions.placeholder = props.placeholder;
|
|
238
|
+
if (props.toolbar && props.toolbar !== '') {
|
|
239
|
+
clientOptions.modules = {
|
|
240
|
+
toolbar: (() => {
|
|
241
|
+
if (typeof props.toolbar === 'object') {
|
|
242
|
+
return props.toolbar;
|
|
243
|
+
}
|
|
244
|
+
else if (typeof props.toolbar === 'string') {
|
|
245
|
+
const str = props.toolbar;
|
|
246
|
+
return str.charAt(0) === '#'
|
|
247
|
+
? props.toolbar
|
|
248
|
+
: toolbarOptions[props.toolbar];
|
|
249
|
+
}
|
|
250
|
+
return;
|
|
251
|
+
})(),
|
|
252
|
+
};
|
|
253
|
+
}
|
|
254
|
+
if (props.modules) {
|
|
255
|
+
const modules = (() => {
|
|
256
|
+
var _a, _b;
|
|
257
|
+
const modulesOption = {};
|
|
258
|
+
if (Array.isArray(props.modules)) {
|
|
259
|
+
for (const module of props.modules) {
|
|
260
|
+
modulesOption[module.name] = (_a = module.options) !== null && _a !== void 0 ? _a : {};
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
else {
|
|
264
|
+
modulesOption[props.modules.name] = (_b = props.modules.options) !== null && _b !== void 0 ? _b : {};
|
|
265
|
+
}
|
|
266
|
+
return modulesOption;
|
|
267
|
+
})();
|
|
268
|
+
clientOptions.modules = Object.assign({}, clientOptions.modules, modules);
|
|
269
|
+
}
|
|
270
|
+
return Object.assign({}, props.globalOptions, props.options, clientOptions);
|
|
271
|
+
};
|
|
272
|
+
const maybeClone = (delta) => {
|
|
273
|
+
return typeof delta === 'object' && delta ? delta.slice() : delta;
|
|
274
|
+
};
|
|
275
|
+
const getToolbarModule = () => {
|
|
276
|
+
return quill === null || quill === void 0 ? void 0 : quill.getModule('toolbar');
|
|
277
|
+
};
|
|
278
|
+
const deltaHasValuesOtherThanRetain = (delta) => {
|
|
279
|
+
return Object.values(delta.ops).some((v) => !v.retain || Object.keys(v).length !== 1);
|
|
280
|
+
};
|
|
281
|
+
// Doesn't need reactivity, but does need to be cloned to avoid deep mutations always registering as equal
|
|
282
|
+
let internalModel;
|
|
283
|
+
const internalModelEquals = (against) => {
|
|
284
|
+
if (typeof internalModel === typeof against) {
|
|
285
|
+
if (against === internalModel) {
|
|
286
|
+
return true;
|
|
287
|
+
}
|
|
288
|
+
// Ref/Proxy does not support instanceof, so do a loose check
|
|
289
|
+
if (typeof against === 'object' &&
|
|
290
|
+
against &&
|
|
291
|
+
typeof internalModel === 'object' &&
|
|
292
|
+
internalModel) {
|
|
293
|
+
return !deltaHasValuesOtherThanRetain(internalModel.diff(against));
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
return false;
|
|
297
|
+
};
|
|
298
|
+
const handleTextChange = (delta, oldContents, source) => {
|
|
299
|
+
internalModel = maybeClone(getContents());
|
|
300
|
+
// Update v-model:content when text changes
|
|
301
|
+
if (!internalModelEquals(props.content)) {
|
|
302
|
+
ctx.emit('update:content', internalModel);
|
|
303
|
+
}
|
|
304
|
+
ctx.emit('textChange', { delta, oldContents, source });
|
|
305
|
+
};
|
|
306
|
+
const isEditorFocus = vue.ref();
|
|
307
|
+
const handleSelectionChange = (range, oldRange, source) => {
|
|
308
|
+
// Set isEditorFocus if quill.hasFocus()
|
|
309
|
+
isEditorFocus.value = !!(quill === null || quill === void 0 ? void 0 : quill.hasFocus());
|
|
310
|
+
ctx.emit('selectionChange', { range, oldRange, source });
|
|
311
|
+
};
|
|
312
|
+
vue.watch(isEditorFocus, (focus) => {
|
|
313
|
+
// Focus and blur events document the editor ref as their payload.
|
|
314
|
+
// eslint-disable-next-line vue/no-ref-as-operand
|
|
315
|
+
if (focus)
|
|
316
|
+
ctx.emit('focus', editor);
|
|
317
|
+
// eslint-disable-next-line vue/no-ref-as-operand
|
|
318
|
+
else
|
|
319
|
+
ctx.emit('blur', editor);
|
|
320
|
+
});
|
|
321
|
+
const handleEditorChange = (...args) => {
|
|
322
|
+
if (args[0] === 'text-change')
|
|
323
|
+
ctx.emit('editorChange', {
|
|
324
|
+
name: args[0],
|
|
325
|
+
delta: args[1],
|
|
326
|
+
oldContents: args[2],
|
|
327
|
+
source: args[3],
|
|
328
|
+
});
|
|
329
|
+
if (args[0] === 'selection-change')
|
|
330
|
+
ctx.emit('editorChange', {
|
|
331
|
+
name: args[0],
|
|
332
|
+
range: args[1],
|
|
333
|
+
oldRange: args[2],
|
|
334
|
+
source: args[3],
|
|
335
|
+
});
|
|
336
|
+
};
|
|
337
|
+
const getEditor = () => {
|
|
338
|
+
return editor.value;
|
|
339
|
+
};
|
|
340
|
+
const getToolbar = () => {
|
|
341
|
+
var _a;
|
|
342
|
+
return (_a = getToolbarModule()) === null || _a === void 0 ? void 0 : _a.container;
|
|
343
|
+
};
|
|
344
|
+
const getQuill = () => {
|
|
345
|
+
if (quill)
|
|
346
|
+
return quill;
|
|
347
|
+
else
|
|
292
348
|
throw `The quill editor hasn't been instantiated yet,
|
|
293
349
|
make sure to call this method when the editor ready
|
|
294
|
-
or use v-on:ready="onReady(quill)" event instead.`;
|
|
295
|
-
};
|
|
296
|
-
const getContents = (index, length) => {
|
|
297
|
-
if (props.contentType === 'html') {
|
|
298
|
-
return getHTML();
|
|
299
|
-
}
|
|
300
|
-
else if (props.contentType === 'text') {
|
|
301
|
-
return getText(index, length);
|
|
302
|
-
}
|
|
303
|
-
return quill === null || quill === void 0 ? void 0 : quill.getContents(index, length);
|
|
304
|
-
};
|
|
305
|
-
const setContents = (content, source = 'api') => {
|
|
306
|
-
const normalizedContent = !content
|
|
307
|
-
? props.contentType === 'delta'
|
|
308
|
-
? new
|
|
309
|
-
: ''
|
|
310
|
-
: content;
|
|
311
|
-
if (props.contentType === 'html') {
|
|
312
|
-
setHTML(normalizedContent);
|
|
313
|
-
}
|
|
314
|
-
else if (props.contentType === 'text') {
|
|
315
|
-
setText(normalizedContent, source);
|
|
316
|
-
}
|
|
317
|
-
else {
|
|
318
|
-
quill === null || quill === void 0 ? void 0 : quill.setContents(normalizedContent, source);
|
|
319
|
-
}
|
|
320
|
-
internalModel = maybeClone(normalizedContent);
|
|
321
|
-
};
|
|
322
|
-
const getText = (index, length) => {
|
|
323
|
-
var _a;
|
|
324
|
-
return (_a = quill === null || quill === void 0 ? void 0 : quill.getText(index, length)) !== null && _a !== void 0 ? _a : '';
|
|
325
|
-
};
|
|
326
|
-
const setText = (text, source = 'api') => {
|
|
327
|
-
quill === null || quill === void 0 ? void 0 : quill.setText(text, source);
|
|
328
|
-
};
|
|
329
|
-
const getHTML = () => {
|
|
330
|
-
var _a;
|
|
331
|
-
return (_a = quill === null || quill === void 0 ? void 0 : quill.root.innerHTML) !== null && _a !== void 0 ? _a : '';
|
|
332
|
-
};
|
|
333
|
-
const setHTML = (html) => {
|
|
334
|
-
if (quill)
|
|
335
|
-
quill.root.innerHTML = html;
|
|
336
|
-
};
|
|
337
|
-
const pasteHTML = (html, source = 'api') => {
|
|
338
|
-
const delta = quill === null || quill === void 0 ? void 0 : quill.clipboard.convert(html);
|
|
339
|
-
if (delta)
|
|
340
|
-
quill === null || quill === void 0 ? void 0 : quill.setContents(delta, source);
|
|
341
|
-
};
|
|
342
|
-
const focus = () => {
|
|
343
|
-
quill === null || quill === void 0 ? void 0 : quill.focus();
|
|
344
|
-
};
|
|
345
|
-
const reinit = () => {
|
|
346
|
-
vue.nextTick(() => {
|
|
347
|
-
var _a;
|
|
348
|
-
if (!ctx.slots.toolbar && quill)
|
|
349
|
-
(_a =
|
|
350
|
-
initialize();
|
|
351
|
-
});
|
|
352
|
-
};
|
|
353
|
-
vue.watch(() => props.content, (newContent) => {
|
|
354
|
-
if (!quill || !newContent || internalModelEquals(newContent))
|
|
355
|
-
return;
|
|
356
|
-
// Restore the selection and cursor position after updating the content
|
|
357
|
-
const selection = quill.getSelection();
|
|
358
|
-
if (selection) {
|
|
359
|
-
vue.nextTick(() => quill === null || quill === void 0 ? void 0 : quill.setSelection(selection));
|
|
360
|
-
}
|
|
361
|
-
setContents(newContent);
|
|
362
|
-
}, { deep: true });
|
|
363
|
-
vue.watch(() => props.enable, (newValue) => {
|
|
364
|
-
if (quill)
|
|
365
|
-
quill.enable(newValue);
|
|
366
|
-
});
|
|
367
|
-
return {
|
|
368
|
-
editor,
|
|
369
|
-
getEditor,
|
|
370
|
-
getToolbar,
|
|
371
|
-
getQuill,
|
|
372
|
-
getContents,
|
|
373
|
-
setContents,
|
|
374
|
-
getHTML,
|
|
375
|
-
setHTML,
|
|
376
|
-
pasteHTML,
|
|
377
|
-
focus,
|
|
378
|
-
getText,
|
|
379
|
-
setText,
|
|
380
|
-
reinit,
|
|
381
|
-
};
|
|
382
|
-
},
|
|
383
|
-
render() {
|
|
384
|
-
var _a, _b;
|
|
385
|
-
return [
|
|
386
|
-
(_b = (_a = this.$slots).toolbar) === null || _b === void 0 ? void 0 : _b.call(_a),
|
|
387
|
-
vue.h('div', { ref: 'editor', ...this.$attrs }),
|
|
388
|
-
];
|
|
389
|
-
},
|
|
350
|
+
or use v-on:ready="onReady(quill)" event instead.`;
|
|
351
|
+
};
|
|
352
|
+
const getContents = (index, length) => {
|
|
353
|
+
if (props.contentType === 'html') {
|
|
354
|
+
return getHTML();
|
|
355
|
+
}
|
|
356
|
+
else if (props.contentType === 'text') {
|
|
357
|
+
return getText(index, length);
|
|
358
|
+
}
|
|
359
|
+
return quill === null || quill === void 0 ? void 0 : quill.getContents(index, length);
|
|
360
|
+
};
|
|
361
|
+
const setContents = (content, source = 'api') => {
|
|
362
|
+
const normalizedContent = !content
|
|
363
|
+
? props.contentType === 'delta'
|
|
364
|
+
? new Delta()
|
|
365
|
+
: ''
|
|
366
|
+
: content;
|
|
367
|
+
if (props.contentType === 'html') {
|
|
368
|
+
setHTML(normalizedContent);
|
|
369
|
+
}
|
|
370
|
+
else if (props.contentType === 'text') {
|
|
371
|
+
setText(normalizedContent, source);
|
|
372
|
+
}
|
|
373
|
+
else {
|
|
374
|
+
quill === null || quill === void 0 ? void 0 : quill.setContents(normalizedContent, source);
|
|
375
|
+
}
|
|
376
|
+
internalModel = maybeClone(normalizedContent);
|
|
377
|
+
};
|
|
378
|
+
const getText = (index, length) => {
|
|
379
|
+
var _a;
|
|
380
|
+
return (_a = quill === null || quill === void 0 ? void 0 : quill.getText(index, length)) !== null && _a !== void 0 ? _a : '';
|
|
381
|
+
};
|
|
382
|
+
const setText = (text, source = 'api') => {
|
|
383
|
+
quill === null || quill === void 0 ? void 0 : quill.setText(text, source);
|
|
384
|
+
};
|
|
385
|
+
const getHTML = () => {
|
|
386
|
+
var _a;
|
|
387
|
+
return (_a = quill === null || quill === void 0 ? void 0 : quill.root.innerHTML) !== null && _a !== void 0 ? _a : '';
|
|
388
|
+
};
|
|
389
|
+
const setHTML = (html) => {
|
|
390
|
+
if (quill)
|
|
391
|
+
quill.root.innerHTML = html;
|
|
392
|
+
};
|
|
393
|
+
const pasteHTML = (html, source = 'api') => {
|
|
394
|
+
const delta = quill === null || quill === void 0 ? void 0 : quill.clipboard.convert({ html });
|
|
395
|
+
if (delta)
|
|
396
|
+
quill === null || quill === void 0 ? void 0 : quill.setContents(delta, source);
|
|
397
|
+
};
|
|
398
|
+
const focus = () => {
|
|
399
|
+
quill === null || quill === void 0 ? void 0 : quill.focus();
|
|
400
|
+
};
|
|
401
|
+
const reinit = () => {
|
|
402
|
+
vue.nextTick(() => {
|
|
403
|
+
var _a, _b;
|
|
404
|
+
if (!ctx.slots.toolbar && quill)
|
|
405
|
+
(_b = (_a = getToolbarModule()) === null || _a === void 0 ? void 0 : _a.container) === null || _b === void 0 ? void 0 : _b.remove();
|
|
406
|
+
void initialize();
|
|
407
|
+
});
|
|
408
|
+
};
|
|
409
|
+
vue.watch(() => props.content, (newContent) => {
|
|
410
|
+
if (!quill || !newContent || internalModelEquals(newContent))
|
|
411
|
+
return;
|
|
412
|
+
// Restore the selection and cursor position after updating the content
|
|
413
|
+
const selection = quill.getSelection();
|
|
414
|
+
if (selection) {
|
|
415
|
+
vue.nextTick(() => quill === null || quill === void 0 ? void 0 : quill.setSelection(selection));
|
|
416
|
+
}
|
|
417
|
+
setContents(newContent);
|
|
418
|
+
}, { deep: true });
|
|
419
|
+
vue.watch(() => props.enable, (newValue) => {
|
|
420
|
+
if (quill)
|
|
421
|
+
quill.enable(newValue);
|
|
422
|
+
});
|
|
423
|
+
return {
|
|
424
|
+
editor,
|
|
425
|
+
getEditor,
|
|
426
|
+
getToolbar,
|
|
427
|
+
getQuill,
|
|
428
|
+
getContents,
|
|
429
|
+
setContents,
|
|
430
|
+
getHTML,
|
|
431
|
+
setHTML,
|
|
432
|
+
pasteHTML,
|
|
433
|
+
focus,
|
|
434
|
+
getText,
|
|
435
|
+
setText,
|
|
436
|
+
reinit,
|
|
437
|
+
};
|
|
438
|
+
},
|
|
439
|
+
render() {
|
|
440
|
+
var _a, _b;
|
|
441
|
+
return [
|
|
442
|
+
(_b = (_a = this.$slots).toolbar) === null || _b === void 0 ? void 0 : _b.call(_a),
|
|
443
|
+
vue.h('div', { ref: 'editor', ...this.$attrs }),
|
|
444
|
+
];
|
|
445
|
+
},
|
|
390
446
|
});
|
|
391
447
|
|
|
392
|
-
exports.
|
|
393
|
-
exports.
|
|
448
|
+
exports.Delta = Delta;
|
|
449
|
+
exports.Quill = Quill;
|
|
394
450
|
exports.QuillEditor = QuillEditor;
|
|
451
|
+
exports.getLoadedQuill = getLoadedQuill;
|
|
452
|
+
exports.loadQuill = loadQuill;
|