@bbl-digital/snorre 4.1.13 → 4.1.15
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/bundle.js +28 -49
- package/esm/core/QuillEditor/index.js +29 -50
- package/lib/core/QuillEditor/index.d.ts +1 -1
- package/lib/core/QuillEditor/index.d.ts.map +1 -1
- package/lib/core/QuillEditor/index.js +29 -50
- package/lib/core/QuillEditor/models.d.ts +3 -3
- package/lib/core/QuillEditor/models.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/bundle.js
CHANGED
|
@@ -35458,7 +35458,7 @@ to {top: 100vh;}
|
|
|
35458
35458
|
'formats/ulist': MyListItem
|
|
35459
35459
|
});
|
|
35460
35460
|
Quill__default["default"].register(CustomLinkSanitizer, true);
|
|
35461
|
-
const QuillEditor =
|
|
35461
|
+
const QuillEditor = ({
|
|
35462
35462
|
height,
|
|
35463
35463
|
width,
|
|
35464
35464
|
maxHeight,
|
|
@@ -35486,12 +35486,14 @@ to {top: 100vh;}
|
|
|
35486
35486
|
pasteAsText,
|
|
35487
35487
|
name,
|
|
35488
35488
|
id
|
|
35489
|
-
}
|
|
35489
|
+
}) => {
|
|
35490
35490
|
const [quill, setQuill] = React.useState(null);
|
|
35491
35491
|
const isMounted = React.useRef(false);
|
|
35492
|
-
const
|
|
35492
|
+
const quillRef = React.useRef(null);
|
|
35493
35493
|
const defaultValueRef = React.useRef(initialValue);
|
|
35494
35494
|
const onTextChangeRef = React.useRef(onChange);
|
|
35495
|
+
const editorId = React.useRef(new Date().getTime() + (100 * Math.random()).toFixed(0));
|
|
35496
|
+
|
|
35495
35497
|
// const onFocusRef = useRef(onFocus)
|
|
35496
35498
|
// const onBlurRef = useRef(onBlur)
|
|
35497
35499
|
const {
|
|
@@ -35546,10 +35548,6 @@ to {top: 100vh;}
|
|
|
35546
35548
|
onChange(html, delta, source, quill);
|
|
35547
35549
|
}
|
|
35548
35550
|
}, [quill, onChange]);
|
|
35549
|
-
const handelFocus = React.useCallback(instance => {
|
|
35550
|
-
const html = instance.root.innerHTML;
|
|
35551
|
-
onFocus && onFocus(html);
|
|
35552
|
-
}, [quill, onFocus]);
|
|
35553
35551
|
const applySizes = quill => {
|
|
35554
35552
|
if (!quill) return;
|
|
35555
35553
|
minHeight && (quill.root.style.minHeight = `${minHeight}px`);
|
|
@@ -35564,10 +35562,7 @@ to {top: 100vh;}
|
|
|
35564
35562
|
});
|
|
35565
35563
|
React.useEffect(() => {
|
|
35566
35564
|
if (isMounted.current) return;
|
|
35567
|
-
|
|
35568
|
-
const editor = container?.appendChild(container.ownerDocument.createElement('div'));
|
|
35569
|
-
if (!editor) return;
|
|
35570
|
-
const quillInstance = new Quill__default["default"](editor, {
|
|
35565
|
+
quillRef.current = new Quill__default["default"](`#editor${editorId.current}`, {
|
|
35571
35566
|
theme: 'snow',
|
|
35572
35567
|
modules: {
|
|
35573
35568
|
...modules
|
|
@@ -35577,14 +35572,8 @@ to {top: 100vh;}
|
|
|
35577
35572
|
bounds,
|
|
35578
35573
|
readOnly
|
|
35579
35574
|
});
|
|
35580
|
-
|
|
35581
|
-
|
|
35582
|
-
if (editorActual) {
|
|
35583
|
-
editorActual.setAttribute('id', id || 'ql-editor');
|
|
35584
|
-
editorActual.setAttribute('name', name || 'ql-editor');
|
|
35585
|
-
}
|
|
35586
|
-
applySizes(quillInstance);
|
|
35587
|
-
quillInstance.keyboard.addBinding({
|
|
35575
|
+
applySizes(quillRef.current);
|
|
35576
|
+
quillRef.current.keyboard.addBinding({
|
|
35588
35577
|
key: 'Backspace'
|
|
35589
35578
|
}, {
|
|
35590
35579
|
format: {
|
|
@@ -35592,47 +35581,37 @@ to {top: 100vh;}
|
|
|
35592
35581
|
indent: true
|
|
35593
35582
|
}
|
|
35594
35583
|
}, (range, context) => {
|
|
35595
|
-
return handleBackspaceWithIndentetList(range, context,
|
|
35584
|
+
return handleBackspaceWithIndentetList(range, context, quillRef.current);
|
|
35596
35585
|
});
|
|
35597
35586
|
// Move the last binding in the list, to the top. Ensure that the custom binding is called first.
|
|
35598
|
-
|
|
35599
|
-
|
|
35587
|
+
quillRef.current.keyboard.bindings['Backspace'].unshift(quillRef.current.keyboard.bindings['Backspace'].pop());
|
|
35588
|
+
quillRef.current.keyboard.addBinding({
|
|
35600
35589
|
key: 'Escape'
|
|
35601
35590
|
}, () => {
|
|
35602
35591
|
// Remove focus from editor
|
|
35603
|
-
|
|
35592
|
+
quillRef.current.blur();
|
|
35604
35593
|
});
|
|
35605
35594
|
if (defaultValueRef.current) {
|
|
35606
|
-
const delta =
|
|
35595
|
+
const delta = quillRef.current.clipboard.convert({
|
|
35607
35596
|
html: defaultValueRef.current
|
|
35608
35597
|
});
|
|
35609
|
-
|
|
35598
|
+
quillRef.current.setContents(delta);
|
|
35599
|
+
}
|
|
35600
|
+
quillRef.current.on(Quill__default["default"].events.TEXT_CHANGE, (...args) => handleChange(...args, quillRef.current));
|
|
35601
|
+
if (onFocus || onBlur) {
|
|
35602
|
+
quillRef.current.on(Quill__default["default"].events.SELECTION_CHANGE, (range, oldRange, source) => {
|
|
35603
|
+
const hasFocus = range && !oldRange;
|
|
35604
|
+
const hasBlur = !range && oldRange;
|
|
35605
|
+
if (onFocus && hasFocus) onFocus(range, quillRef.current.root.innerHTML);
|
|
35606
|
+
if (onBlur && hasBlur) onBlur(oldRange, quillRef.current.root.innerHTML);
|
|
35607
|
+
});
|
|
35610
35608
|
}
|
|
35611
|
-
quillInstance.on(Quill__default["default"].events.TEXT_CHANGE, (...args) => handleChange(...args, quillInstance));
|
|
35612
|
-
quillInstance.on(Quill__default["default"].events.SELECTION_CHANGE, range => {
|
|
35613
|
-
if (!range) return;
|
|
35614
|
-
handelFocus(quillInstance);
|
|
35615
|
-
});
|
|
35616
35609
|
isMounted.current = true;
|
|
35617
|
-
setQuill(
|
|
35610
|
+
setQuill(quillRef.current);
|
|
35618
35611
|
return () => {
|
|
35619
|
-
|
|
35620
|
-
container.innerHTML = '';
|
|
35612
|
+
quillRef.current = null;
|
|
35621
35613
|
};
|
|
35622
|
-
}, [
|
|
35623
|
-
React.useEffect(() => {
|
|
35624
|
-
if (!quill) return;
|
|
35625
|
-
const handleBlur = () => {
|
|
35626
|
-
setTimeout(() => {
|
|
35627
|
-
const html = quill.root.innerHTML;
|
|
35628
|
-
onBlur && onBlur(html);
|
|
35629
|
-
}, 50);
|
|
35630
|
-
};
|
|
35631
|
-
quill.root.addEventListener('blur', handleBlur);
|
|
35632
|
-
return () => {
|
|
35633
|
-
quill.root.removeEventListener('blur', handleBlur);
|
|
35634
|
-
};
|
|
35635
|
-
}, [quill]);
|
|
35614
|
+
}, [quillRef]);
|
|
35636
35615
|
React.useEffect(() => {
|
|
35637
35616
|
if (!quill) return;
|
|
35638
35617
|
quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
|
|
@@ -35681,7 +35660,7 @@ to {top: 100vh;}
|
|
|
35681
35660
|
...style
|
|
35682
35661
|
},
|
|
35683
35662
|
children: jsxRuntime.jsx("div", {
|
|
35684
|
-
|
|
35663
|
+
id: `editor${editorId.current}`
|
|
35685
35664
|
})
|
|
35686
35665
|
}), invalidMessage && jsxRuntime.jsx(ErrorWrapper, {
|
|
35687
35666
|
children: jsxRuntime.jsxs(Text, {
|
|
@@ -35693,7 +35672,7 @@ to {top: 100vh;}
|
|
|
35693
35672
|
})
|
|
35694
35673
|
})]
|
|
35695
35674
|
});
|
|
35696
|
-
}
|
|
35675
|
+
};
|
|
35697
35676
|
|
|
35698
35677
|
const getReducedArray = (array, indexesAmount) => {
|
|
35699
35678
|
// copies x amount of indexes from array (in order) to a new array
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/** @jsxImportSource @emotion/react */
|
|
2
|
-
import { useRef, useState, useEffect, useCallback,
|
|
2
|
+
import { useRef, useState, useEffect, useCallback, useLayoutEffect } from 'react';
|
|
3
3
|
import Quill from 'quill';
|
|
4
4
|
import 'quill/dist/quill.snow.css';
|
|
5
5
|
import { basicToolbar, richToolbar } from './config';
|
|
@@ -55,7 +55,7 @@ Quill.register({
|
|
|
55
55
|
'formats/ulist': MyListItem
|
|
56
56
|
});
|
|
57
57
|
Quill.register(CustomLinkSanitizer, true);
|
|
58
|
-
const QuillEditor =
|
|
58
|
+
const QuillEditor = ({
|
|
59
59
|
height,
|
|
60
60
|
width,
|
|
61
61
|
maxHeight,
|
|
@@ -83,12 +83,14 @@ const QuillEditor = /*#__PURE__*/forwardRef(({
|
|
|
83
83
|
pasteAsText,
|
|
84
84
|
name,
|
|
85
85
|
id
|
|
86
|
-
}
|
|
86
|
+
}) => {
|
|
87
87
|
const [quill, setQuill] = useState(null);
|
|
88
88
|
const isMounted = useRef(false);
|
|
89
|
-
const
|
|
89
|
+
const quillRef = useRef(null);
|
|
90
90
|
const defaultValueRef = useRef(initialValue);
|
|
91
91
|
const onTextChangeRef = useRef(onChange);
|
|
92
|
+
const editorId = useRef(new Date().getTime() + (100 * Math.random()).toFixed(0));
|
|
93
|
+
|
|
92
94
|
// const onFocusRef = useRef(onFocus)
|
|
93
95
|
// const onBlurRef = useRef(onBlur)
|
|
94
96
|
const {
|
|
@@ -143,10 +145,6 @@ const QuillEditor = /*#__PURE__*/forwardRef(({
|
|
|
143
145
|
onChange(html, delta, source, quill);
|
|
144
146
|
}
|
|
145
147
|
}, [quill, onChange]);
|
|
146
|
-
const handelFocus = useCallback(instance => {
|
|
147
|
-
const html = instance.root.innerHTML;
|
|
148
|
-
onFocus && onFocus(html);
|
|
149
|
-
}, [quill, onFocus]);
|
|
150
148
|
const applySizes = quill => {
|
|
151
149
|
if (!quill) return;
|
|
152
150
|
minHeight && (quill.root.style.minHeight = `${minHeight}px`);
|
|
@@ -161,10 +159,7 @@ const QuillEditor = /*#__PURE__*/forwardRef(({
|
|
|
161
159
|
});
|
|
162
160
|
useEffect(() => {
|
|
163
161
|
if (isMounted.current) return;
|
|
164
|
-
|
|
165
|
-
const editor = container?.appendChild(container.ownerDocument.createElement('div'));
|
|
166
|
-
if (!editor) return;
|
|
167
|
-
const quillInstance = new Quill(editor, {
|
|
162
|
+
quillRef.current = new Quill(`#editor${editorId.current}`, {
|
|
168
163
|
theme: 'snow',
|
|
169
164
|
modules: {
|
|
170
165
|
...modules
|
|
@@ -174,14 +169,8 @@ const QuillEditor = /*#__PURE__*/forwardRef(({
|
|
|
174
169
|
bounds,
|
|
175
170
|
readOnly
|
|
176
171
|
});
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
if (editorActual) {
|
|
180
|
-
editorActual.setAttribute('id', id || 'ql-editor');
|
|
181
|
-
editorActual.setAttribute('name', name || 'ql-editor');
|
|
182
|
-
}
|
|
183
|
-
applySizes(quillInstance);
|
|
184
|
-
quillInstance.keyboard.addBinding({
|
|
172
|
+
applySizes(quillRef.current);
|
|
173
|
+
quillRef.current.keyboard.addBinding({
|
|
185
174
|
key: 'Backspace'
|
|
186
175
|
}, {
|
|
187
176
|
format: {
|
|
@@ -189,47 +178,37 @@ const QuillEditor = /*#__PURE__*/forwardRef(({
|
|
|
189
178
|
indent: true
|
|
190
179
|
}
|
|
191
180
|
}, (range, context) => {
|
|
192
|
-
return handleBackspaceWithIndentetList(range, context,
|
|
181
|
+
return handleBackspaceWithIndentetList(range, context, quillRef.current);
|
|
193
182
|
});
|
|
194
183
|
// Move the last binding in the list, to the top. Ensure that the custom binding is called first.
|
|
195
|
-
|
|
196
|
-
|
|
184
|
+
quillRef.current.keyboard.bindings['Backspace'].unshift(quillRef.current.keyboard.bindings['Backspace'].pop());
|
|
185
|
+
quillRef.current.keyboard.addBinding({
|
|
197
186
|
key: 'Escape'
|
|
198
187
|
}, () => {
|
|
199
188
|
// Remove focus from editor
|
|
200
|
-
|
|
189
|
+
quillRef.current.blur();
|
|
201
190
|
});
|
|
202
191
|
if (defaultValueRef.current) {
|
|
203
|
-
const delta =
|
|
192
|
+
const delta = quillRef.current.clipboard.convert({
|
|
204
193
|
html: defaultValueRef.current
|
|
205
194
|
});
|
|
206
|
-
|
|
195
|
+
quillRef.current.setContents(delta);
|
|
196
|
+
}
|
|
197
|
+
quillRef.current.on(Quill.events.TEXT_CHANGE, (...args) => handleChange(...args, quillRef.current));
|
|
198
|
+
if (onFocus || onBlur) {
|
|
199
|
+
quillRef.current.on(Quill.events.SELECTION_CHANGE, (range, oldRange, source) => {
|
|
200
|
+
const hasFocus = range && !oldRange;
|
|
201
|
+
const hasBlur = !range && oldRange;
|
|
202
|
+
if (onFocus && hasFocus) onFocus(range, quillRef.current.root.innerHTML);
|
|
203
|
+
if (onBlur && hasBlur) onBlur(oldRange, quillRef.current.root.innerHTML);
|
|
204
|
+
});
|
|
207
205
|
}
|
|
208
|
-
quillInstance.on(Quill.events.TEXT_CHANGE, (...args) => handleChange(...args, quillInstance));
|
|
209
|
-
quillInstance.on(Quill.events.SELECTION_CHANGE, range => {
|
|
210
|
-
if (!range) return;
|
|
211
|
-
handelFocus(quillInstance);
|
|
212
|
-
});
|
|
213
206
|
isMounted.current = true;
|
|
214
|
-
setQuill(
|
|
207
|
+
setQuill(quillRef.current);
|
|
215
208
|
return () => {
|
|
216
|
-
|
|
217
|
-
container.innerHTML = '';
|
|
209
|
+
quillRef.current = null;
|
|
218
210
|
};
|
|
219
|
-
}, [
|
|
220
|
-
useEffect(() => {
|
|
221
|
-
if (!quill) return;
|
|
222
|
-
const handleBlur = () => {
|
|
223
|
-
setTimeout(() => {
|
|
224
|
-
const html = quill.root.innerHTML;
|
|
225
|
-
onBlur && onBlur(html);
|
|
226
|
-
}, 50);
|
|
227
|
-
};
|
|
228
|
-
quill.root.addEventListener('blur', handleBlur);
|
|
229
|
-
return () => {
|
|
230
|
-
quill.root.removeEventListener('blur', handleBlur);
|
|
231
|
-
};
|
|
232
|
-
}, [quill]);
|
|
211
|
+
}, [quillRef]);
|
|
233
212
|
useEffect(() => {
|
|
234
213
|
if (!quill) return;
|
|
235
214
|
quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
|
|
@@ -278,7 +257,7 @@ const QuillEditor = /*#__PURE__*/forwardRef(({
|
|
|
278
257
|
...style
|
|
279
258
|
},
|
|
280
259
|
children: _jsx("div", {
|
|
281
|
-
|
|
260
|
+
id: `editor${editorId.current}`
|
|
282
261
|
})
|
|
283
262
|
}), invalidMessage && _jsx(ErrorWrapper, {
|
|
284
263
|
children: _jsxs(Text, {
|
|
@@ -290,5 +269,5 @@ const QuillEditor = /*#__PURE__*/forwardRef(({
|
|
|
290
269
|
})
|
|
291
270
|
})]
|
|
292
271
|
});
|
|
293
|
-
}
|
|
272
|
+
};
|
|
294
273
|
export default QuillEditor;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import 'quill/dist/quill.snow.css';
|
|
2
2
|
import { QuillEditorProps } from './models';
|
|
3
|
-
declare const QuillEditor:
|
|
3
|
+
declare const QuillEditor: React.FC<QuillEditorProps>;
|
|
4
4
|
export default QuillEditor;
|
|
5
5
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/QuillEditor/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/QuillEditor/index.tsx"],"names":[],"mappings":"AASA,OAAO,2BAA2B,CAAA;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AA+D3C,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA6P3C,CAAA;AAED,eAAe,WAAW,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/** @jsxImportSource @emotion/react */
|
|
2
|
-
import { useRef, useState, useEffect, useCallback,
|
|
2
|
+
import { useRef, useState, useEffect, useCallback, useLayoutEffect } from 'react';
|
|
3
3
|
import Quill from 'quill';
|
|
4
4
|
import 'quill/dist/quill.snow.css';
|
|
5
5
|
import { basicToolbar, richToolbar } from './config';
|
|
@@ -55,7 +55,7 @@ Quill.register({
|
|
|
55
55
|
'formats/ulist': MyListItem
|
|
56
56
|
});
|
|
57
57
|
Quill.register(CustomLinkSanitizer, true);
|
|
58
|
-
const QuillEditor =
|
|
58
|
+
const QuillEditor = ({
|
|
59
59
|
height,
|
|
60
60
|
width,
|
|
61
61
|
maxHeight,
|
|
@@ -83,12 +83,14 @@ const QuillEditor = /*#__PURE__*/forwardRef(({
|
|
|
83
83
|
pasteAsText,
|
|
84
84
|
name,
|
|
85
85
|
id
|
|
86
|
-
}
|
|
86
|
+
}) => {
|
|
87
87
|
const [quill, setQuill] = useState(null);
|
|
88
88
|
const isMounted = useRef(false);
|
|
89
|
-
const
|
|
89
|
+
const quillRef = useRef(null);
|
|
90
90
|
const defaultValueRef = useRef(initialValue);
|
|
91
91
|
const onTextChangeRef = useRef(onChange);
|
|
92
|
+
const editorId = useRef(new Date().getTime() + (100 * Math.random()).toFixed(0));
|
|
93
|
+
|
|
92
94
|
// const onFocusRef = useRef(onFocus)
|
|
93
95
|
// const onBlurRef = useRef(onBlur)
|
|
94
96
|
const {
|
|
@@ -143,10 +145,6 @@ const QuillEditor = /*#__PURE__*/forwardRef(({
|
|
|
143
145
|
onChange(html, delta, source, quill);
|
|
144
146
|
}
|
|
145
147
|
}, [quill, onChange]);
|
|
146
|
-
const handelFocus = useCallback(instance => {
|
|
147
|
-
const html = instance.root.innerHTML;
|
|
148
|
-
onFocus && onFocus(html);
|
|
149
|
-
}, [quill, onFocus]);
|
|
150
148
|
const applySizes = quill => {
|
|
151
149
|
if (!quill) return;
|
|
152
150
|
minHeight && (quill.root.style.minHeight = `${minHeight}px`);
|
|
@@ -161,10 +159,7 @@ const QuillEditor = /*#__PURE__*/forwardRef(({
|
|
|
161
159
|
});
|
|
162
160
|
useEffect(() => {
|
|
163
161
|
if (isMounted.current) return;
|
|
164
|
-
|
|
165
|
-
const editor = container?.appendChild(container.ownerDocument.createElement('div'));
|
|
166
|
-
if (!editor) return;
|
|
167
|
-
const quillInstance = new Quill(editor, {
|
|
162
|
+
quillRef.current = new Quill(`#editor${editorId.current}`, {
|
|
168
163
|
theme: 'snow',
|
|
169
164
|
modules: {
|
|
170
165
|
...modules
|
|
@@ -174,14 +169,8 @@ const QuillEditor = /*#__PURE__*/forwardRef(({
|
|
|
174
169
|
bounds,
|
|
175
170
|
readOnly
|
|
176
171
|
});
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
if (editorActual) {
|
|
180
|
-
editorActual.setAttribute('id', id || 'ql-editor');
|
|
181
|
-
editorActual.setAttribute('name', name || 'ql-editor');
|
|
182
|
-
}
|
|
183
|
-
applySizes(quillInstance);
|
|
184
|
-
quillInstance.keyboard.addBinding({
|
|
172
|
+
applySizes(quillRef.current);
|
|
173
|
+
quillRef.current.keyboard.addBinding({
|
|
185
174
|
key: 'Backspace'
|
|
186
175
|
}, {
|
|
187
176
|
format: {
|
|
@@ -189,47 +178,37 @@ const QuillEditor = /*#__PURE__*/forwardRef(({
|
|
|
189
178
|
indent: true
|
|
190
179
|
}
|
|
191
180
|
}, (range, context) => {
|
|
192
|
-
return handleBackspaceWithIndentetList(range, context,
|
|
181
|
+
return handleBackspaceWithIndentetList(range, context, quillRef.current);
|
|
193
182
|
});
|
|
194
183
|
// Move the last binding in the list, to the top. Ensure that the custom binding is called first.
|
|
195
|
-
|
|
196
|
-
|
|
184
|
+
quillRef.current.keyboard.bindings['Backspace'].unshift(quillRef.current.keyboard.bindings['Backspace'].pop());
|
|
185
|
+
quillRef.current.keyboard.addBinding({
|
|
197
186
|
key: 'Escape'
|
|
198
187
|
}, () => {
|
|
199
188
|
// Remove focus from editor
|
|
200
|
-
|
|
189
|
+
quillRef.current.blur();
|
|
201
190
|
});
|
|
202
191
|
if (defaultValueRef.current) {
|
|
203
|
-
const delta =
|
|
192
|
+
const delta = quillRef.current.clipboard.convert({
|
|
204
193
|
html: defaultValueRef.current
|
|
205
194
|
});
|
|
206
|
-
|
|
195
|
+
quillRef.current.setContents(delta);
|
|
196
|
+
}
|
|
197
|
+
quillRef.current.on(Quill.events.TEXT_CHANGE, (...args) => handleChange(...args, quillRef.current));
|
|
198
|
+
if (onFocus || onBlur) {
|
|
199
|
+
quillRef.current.on(Quill.events.SELECTION_CHANGE, (range, oldRange, source) => {
|
|
200
|
+
const hasFocus = range && !oldRange;
|
|
201
|
+
const hasBlur = !range && oldRange;
|
|
202
|
+
if (onFocus && hasFocus) onFocus(range, quillRef.current.root.innerHTML);
|
|
203
|
+
if (onBlur && hasBlur) onBlur(oldRange, quillRef.current.root.innerHTML);
|
|
204
|
+
});
|
|
207
205
|
}
|
|
208
|
-
quillInstance.on(Quill.events.TEXT_CHANGE, (...args) => handleChange(...args, quillInstance));
|
|
209
|
-
quillInstance.on(Quill.events.SELECTION_CHANGE, range => {
|
|
210
|
-
if (!range) return;
|
|
211
|
-
handelFocus(quillInstance);
|
|
212
|
-
});
|
|
213
206
|
isMounted.current = true;
|
|
214
|
-
setQuill(
|
|
207
|
+
setQuill(quillRef.current);
|
|
215
208
|
return () => {
|
|
216
|
-
|
|
217
|
-
container.innerHTML = '';
|
|
209
|
+
quillRef.current = null;
|
|
218
210
|
};
|
|
219
|
-
}, [
|
|
220
|
-
useEffect(() => {
|
|
221
|
-
if (!quill) return;
|
|
222
|
-
const handleBlur = () => {
|
|
223
|
-
setTimeout(() => {
|
|
224
|
-
const html = quill.root.innerHTML;
|
|
225
|
-
onBlur && onBlur(html);
|
|
226
|
-
}, 50);
|
|
227
|
-
};
|
|
228
|
-
quill.root.addEventListener('blur', handleBlur);
|
|
229
|
-
return () => {
|
|
230
|
-
quill.root.removeEventListener('blur', handleBlur);
|
|
231
|
-
};
|
|
232
|
-
}, [quill]);
|
|
211
|
+
}, [quillRef]);
|
|
233
212
|
useEffect(() => {
|
|
234
213
|
if (!quill) return;
|
|
235
214
|
quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
|
|
@@ -278,7 +257,7 @@ const QuillEditor = /*#__PURE__*/forwardRef(({
|
|
|
278
257
|
...style
|
|
279
258
|
},
|
|
280
259
|
children: _jsx("div", {
|
|
281
|
-
|
|
260
|
+
id: `editor${editorId.current}`
|
|
282
261
|
})
|
|
283
262
|
}), invalidMessage && _jsx(ErrorWrapper, {
|
|
284
263
|
children: _jsxs(Text, {
|
|
@@ -290,5 +269,5 @@ const QuillEditor = /*#__PURE__*/forwardRef(({
|
|
|
290
269
|
})
|
|
291
270
|
})]
|
|
292
271
|
});
|
|
293
|
-
}
|
|
272
|
+
};
|
|
294
273
|
export default QuillEditor;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import Quill from 'quill';
|
|
1
|
+
import Quill, { Range } from 'quill';
|
|
2
2
|
interface QuillToolbarConfig {
|
|
3
3
|
bold?: boolean;
|
|
4
4
|
italic?: boolean;
|
|
@@ -60,8 +60,8 @@ interface QuillEditorProps {
|
|
|
60
60
|
formats?: string[];
|
|
61
61
|
bounds?: string | HTMLElement;
|
|
62
62
|
onChange?: (content: string, delta: any, source: string, editor: any) => void;
|
|
63
|
-
onFocus?: (
|
|
64
|
-
onBlur?: (
|
|
63
|
+
onFocus?: (range: Range, html?: string) => void;
|
|
64
|
+
onBlur?: (oldRange: Range, html?: string) => void;
|
|
65
65
|
invalidMessage?: string;
|
|
66
66
|
style?: React.CSSProperties;
|
|
67
67
|
className?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"models.d.ts","sourceRoot":"","sources":["../../../src/packages/core/QuillEditor/models.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"models.d.ts","sourceRoot":"","sources":["../../../src/packages/core/QuillEditor/models.ts"],"names":[],"mappings":"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"}
|