@bbl-digital/snorre 4.1.14 → 4.1.15

Sign up to get free protection for your applications and to get access to all the features.
Files changed (8) hide show
  1. package/dist/bundle.js +62 -77
  2. package/esm/core/QuillEditor/index.js +63 -78
  3. package/lib/core/QuillEditor/index.d.ts +1 -1
  4. package/lib/core/QuillEditor/index.d.ts.map +1 -1
  5. package/lib/core/QuillEditor/index.js +63 -78
  6. package/lib/core/QuillEditor/models.d.ts +3 -3
  7. package/lib/core/QuillEditor/models.d.ts.map +1 -1
  8. 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 = /*#__PURE__*/React.forwardRef(({
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
- }, ref) => {
35489
+ }) => {
35490
35490
  const [quill, setQuill] = React.useState(null);
35491
35491
  const isMounted = React.useRef(false);
35492
- const containerRef = React.useRef(null);
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
- const container = containerRef.current;
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
- ref && ref.current && (ref.current = editor);
35581
- const editorActual = editor.querySelector('.ql-editor');
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,75 +35581,71 @@ to {top: 100vh;}
35592
35581
  indent: true
35593
35582
  }
35594
35583
  }, (range, context) => {
35595
- return handleBackspaceWithIndentetList(range, context, quillInstance);
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
- quillInstance.keyboard.bindings['Backspace'].unshift(quillInstance.keyboard.bindings['Backspace'].pop());
35599
- quillInstance.keyboard.addBinding({
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
- quillInstance.blur();
35592
+ quillRef.current.blur();
35604
35593
  });
35605
35594
  if (defaultValueRef.current) {
35606
- const delta = quillInstance.clipboard.convert({
35595
+ const delta = quillRef.current.clipboard.convert({
35607
35596
  html: defaultValueRef.current
35608
35597
  });
35609
- quillInstance.setContents(delta);
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
- const html = quillInstance.root.innerHTML;
35614
- if (!range) {
35615
- handelFocus?.(quillInstance);
35616
- } else {
35617
- onBlur?.(html);
35618
- }
35619
- });
35620
35609
  isMounted.current = true;
35621
- setQuill(quillInstance);
35610
+ setQuill(quillRef.current);
35622
35611
  return () => {
35623
- ref && ref.current && (ref.current = null);
35624
- container.innerHTML = '';
35612
+ quillRef.current = null;
35625
35613
  };
35626
- }, [ref]);
35627
-
35628
- // useEffect(() => {
35629
- // if (!quill) return
35630
-
35631
- // quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
35632
- // if (!pasteAsText) return delta
35633
- // let ops: Op[] = []
35634
- // delta.ops.forEach((op) => {
35635
- // if (op.insert && typeof op.insert === 'string') {
35636
- // ops.push({
35637
- // insert: op.insert,
35638
- // })
35639
- // }
35640
- // })
35641
- // delta.ops = ops
35642
- // return delta
35643
- // })
35644
- // }, [quill, pasteAsText])
35645
-
35646
- // useEffect(() => {
35647
- // if (quill && overrideValue !== undefined) {
35648
- // const currentContent = quill.root.innerHTML
35649
- // if (currentContent !== overrideValue) {
35650
- // const delta = quill.clipboard.convert({ html: overrideValue })
35651
- // quill.setContents(delta)
35652
- // }
35653
- // }
35654
- // }, [quill, overrideValue])
35655
-
35656
- // useEffect(() => {
35657
- // if (quill && (disabled || readOnly)) {
35658
- // quill.enable(false)
35659
- // } else if (quill) {
35660
- // quill.enable(true)
35661
- // }
35662
- // }, [readOnly, quill])
35663
-
35614
+ }, [quillRef]);
35615
+ React.useEffect(() => {
35616
+ if (!quill) return;
35617
+ quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
35618
+ if (!pasteAsText) return delta;
35619
+ let ops = [];
35620
+ delta.ops.forEach(op => {
35621
+ if (op.insert && typeof op.insert === 'string') {
35622
+ ops.push({
35623
+ insert: op.insert
35624
+ });
35625
+ }
35626
+ });
35627
+ delta.ops = ops;
35628
+ return delta;
35629
+ });
35630
+ }, [quill, pasteAsText]);
35631
+ React.useEffect(() => {
35632
+ if (quill && overrideValue !== undefined) {
35633
+ const currentContent = quill.root.innerHTML;
35634
+ if (currentContent !== overrideValue) {
35635
+ const delta = quill.clipboard.convert({
35636
+ html: overrideValue
35637
+ });
35638
+ quill.setContents(delta);
35639
+ }
35640
+ }
35641
+ }, [quill, overrideValue]);
35642
+ React.useEffect(() => {
35643
+ if (quill && (disabled || readOnly)) {
35644
+ quill.enable(false);
35645
+ } else if (quill) {
35646
+ quill.enable(true);
35647
+ }
35648
+ }, [readOnly, quill]);
35664
35649
  return jsxRuntime.jsxs("div", {
35665
35650
  css: theme => [styles.default(theme, maxHeight)],
35666
35651
  children: [label && jsxRuntime.jsx(Label, {
@@ -35675,7 +35660,7 @@ to {top: 100vh;}
35675
35660
  ...style
35676
35661
  },
35677
35662
  children: jsxRuntime.jsx("div", {
35678
- ref: containerRef
35663
+ id: `editor${editorId.current}`
35679
35664
  })
35680
35665
  }), invalidMessage && jsxRuntime.jsx(ErrorWrapper, {
35681
35666
  children: jsxRuntime.jsxs(Text, {
@@ -35687,7 +35672,7 @@ to {top: 100vh;}
35687
35672
  })
35688
35673
  })]
35689
35674
  });
35690
- });
35675
+ };
35691
35676
 
35692
35677
  const getReducedArray = (array, indexesAmount) => {
35693
35678
  // copies x amount of indexes from array (in order) to a new array
package/esm/core/QuillEditor/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /** @jsxImportSource @emotion/react */
2
- import { useRef, useState, useEffect, useCallback, forwardRef, useLayoutEffect } from 'react';
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 = /*#__PURE__*/forwardRef(({
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
- }, ref) => {
86
+ }) => {
87
87
  const [quill, setQuill] = useState(null);
88
88
  const isMounted = useRef(false);
89
- const containerRef = useRef(null);
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
- const container = containerRef.current;
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
- ref && ref.current && (ref.current = editor);
178
- const editorActual = editor.querySelector('.ql-editor');
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,75 +178,71 @@ const QuillEditor = /*#__PURE__*/forwardRef(({
189
178
  indent: true
190
179
  }
191
180
  }, (range, context) => {
192
- return handleBackspaceWithIndentetList(range, context, quillInstance);
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
- quillInstance.keyboard.bindings['Backspace'].unshift(quillInstance.keyboard.bindings['Backspace'].pop());
196
- quillInstance.keyboard.addBinding({
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
- quillInstance.blur();
189
+ quillRef.current.blur();
201
190
  });
202
191
  if (defaultValueRef.current) {
203
- const delta = quillInstance.clipboard.convert({
192
+ const delta = quillRef.current.clipboard.convert({
204
193
  html: defaultValueRef.current
205
194
  });
206
- quillInstance.setContents(delta);
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
- const html = quillInstance.root.innerHTML;
211
- if (!range) {
212
- handelFocus?.(quillInstance);
213
- } else {
214
- onBlur?.(html);
215
- }
216
- });
217
206
  isMounted.current = true;
218
- setQuill(quillInstance);
207
+ setQuill(quillRef.current);
219
208
  return () => {
220
- ref && ref.current && (ref.current = null);
221
- container.innerHTML = '';
209
+ quillRef.current = null;
222
210
  };
223
- }, [ref]);
224
-
225
- // useEffect(() => {
226
- // if (!quill) return
227
-
228
- // quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
229
- // if (!pasteAsText) return delta
230
- // let ops: Op[] = []
231
- // delta.ops.forEach((op) => {
232
- // if (op.insert && typeof op.insert === 'string') {
233
- // ops.push({
234
- // insert: op.insert,
235
- // })
236
- // }
237
- // })
238
- // delta.ops = ops
239
- // return delta
240
- // })
241
- // }, [quill, pasteAsText])
242
-
243
- // useEffect(() => {
244
- // if (quill && overrideValue !== undefined) {
245
- // const currentContent = quill.root.innerHTML
246
- // if (currentContent !== overrideValue) {
247
- // const delta = quill.clipboard.convert({ html: overrideValue })
248
- // quill.setContents(delta)
249
- // }
250
- // }
251
- // }, [quill, overrideValue])
252
-
253
- // useEffect(() => {
254
- // if (quill && (disabled || readOnly)) {
255
- // quill.enable(false)
256
- // } else if (quill) {
257
- // quill.enable(true)
258
- // }
259
- // }, [readOnly, quill])
260
-
211
+ }, [quillRef]);
212
+ useEffect(() => {
213
+ if (!quill) return;
214
+ quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
215
+ if (!pasteAsText) return delta;
216
+ let ops = [];
217
+ delta.ops.forEach(op => {
218
+ if (op.insert && typeof op.insert === 'string') {
219
+ ops.push({
220
+ insert: op.insert
221
+ });
222
+ }
223
+ });
224
+ delta.ops = ops;
225
+ return delta;
226
+ });
227
+ }, [quill, pasteAsText]);
228
+ useEffect(() => {
229
+ if (quill && overrideValue !== undefined) {
230
+ const currentContent = quill.root.innerHTML;
231
+ if (currentContent !== overrideValue) {
232
+ const delta = quill.clipboard.convert({
233
+ html: overrideValue
234
+ });
235
+ quill.setContents(delta);
236
+ }
237
+ }
238
+ }, [quill, overrideValue]);
239
+ useEffect(() => {
240
+ if (quill && (disabled || readOnly)) {
241
+ quill.enable(false);
242
+ } else if (quill) {
243
+ quill.enable(true);
244
+ }
245
+ }, [readOnly, quill]);
261
246
  return _jsxs("div", {
262
247
  css: theme => [styles.default(theme, maxHeight)],
263
248
  children: [label && _jsx(Label, {
@@ -272,7 +257,7 @@ const QuillEditor = /*#__PURE__*/forwardRef(({
272
257
  ...style
273
258
  },
274
259
  children: _jsx("div", {
275
- ref: containerRef
260
+ id: `editor${editorId.current}`
276
261
  })
277
262
  }), invalidMessage && _jsx(ErrorWrapper, {
278
263
  children: _jsxs(Text, {
@@ -284,5 +269,5 @@ const QuillEditor = /*#__PURE__*/forwardRef(({
284
269
  })
285
270
  })]
286
271
  });
287
- });
272
+ };
288
273
  export default QuillEditor;
package/lib/core/QuillEditor/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import 'quill/dist/quill.snow.css';
2
2
  import { QuillEditorProps } from './models';
3
- declare const QuillEditor: import("react").ForwardRefExoticComponent<QuillEditorProps & import("react").RefAttributes<HTMLDivElement>>;
3
+ declare const QuillEditor: React.FC<QuillEditorProps>;
4
4
  export default QuillEditor;
5
5
  //# sourceMappingURL=index.d.ts.map
package/lib/core/QuillEditor/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/QuillEditor/index.tsx"],"names":[],"mappings":"AAUA,OAAO,2BAA2B,CAAA;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAgE3C,QAAA,MAAM,WAAW,6GAiRhB,CAAA;AAED,eAAe,WAAW,CAAA"}
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"}
package/lib/core/QuillEditor/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /** @jsxImportSource @emotion/react */
2
- import { useRef, useState, useEffect, useCallback, forwardRef, useLayoutEffect } from 'react';
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 = /*#__PURE__*/forwardRef(({
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
- }, ref) => {
86
+ }) => {
87
87
  const [quill, setQuill] = useState(null);
88
88
  const isMounted = useRef(false);
89
- const containerRef = useRef(null);
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
- const container = containerRef.current;
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
- ref && ref.current && (ref.current = editor);
178
- const editorActual = editor.querySelector('.ql-editor');
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,75 +178,71 @@ const QuillEditor = /*#__PURE__*/forwardRef(({
189
178
  indent: true
190
179
  }
191
180
  }, (range, context) => {
192
- return handleBackspaceWithIndentetList(range, context, quillInstance);
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
- quillInstance.keyboard.bindings['Backspace'].unshift(quillInstance.keyboard.bindings['Backspace'].pop());
196
- quillInstance.keyboard.addBinding({
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
- quillInstance.blur();
189
+ quillRef.current.blur();
201
190
  });
202
191
  if (defaultValueRef.current) {
203
- const delta = quillInstance.clipboard.convert({
192
+ const delta = quillRef.current.clipboard.convert({
204
193
  html: defaultValueRef.current
205
194
  });
206
- quillInstance.setContents(delta);
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
- const html = quillInstance.root.innerHTML;
211
- if (!range) {
212
- handelFocus?.(quillInstance);
213
- } else {
214
- onBlur?.(html);
215
- }
216
- });
217
206
  isMounted.current = true;
218
- setQuill(quillInstance);
207
+ setQuill(quillRef.current);
219
208
  return () => {
220
- ref && ref.current && (ref.current = null);
221
- container.innerHTML = '';
209
+ quillRef.current = null;
222
210
  };
223
- }, [ref]);
224
-
225
- // useEffect(() => {
226
- // if (!quill) return
227
-
228
- // quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
229
- // if (!pasteAsText) return delta
230
- // let ops: Op[] = []
231
- // delta.ops.forEach((op) => {
232
- // if (op.insert && typeof op.insert === 'string') {
233
- // ops.push({
234
- // insert: op.insert,
235
- // })
236
- // }
237
- // })
238
- // delta.ops = ops
239
- // return delta
240
- // })
241
- // }, [quill, pasteAsText])
242
-
243
- // useEffect(() => {
244
- // if (quill && overrideValue !== undefined) {
245
- // const currentContent = quill.root.innerHTML
246
- // if (currentContent !== overrideValue) {
247
- // const delta = quill.clipboard.convert({ html: overrideValue })
248
- // quill.setContents(delta)
249
- // }
250
- // }
251
- // }, [quill, overrideValue])
252
-
253
- // useEffect(() => {
254
- // if (quill && (disabled || readOnly)) {
255
- // quill.enable(false)
256
- // } else if (quill) {
257
- // quill.enable(true)
258
- // }
259
- // }, [readOnly, quill])
260
-
211
+ }, [quillRef]);
212
+ useEffect(() => {
213
+ if (!quill) return;
214
+ quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
215
+ if (!pasteAsText) return delta;
216
+ let ops = [];
217
+ delta.ops.forEach(op => {
218
+ if (op.insert && typeof op.insert === 'string') {
219
+ ops.push({
220
+ insert: op.insert
221
+ });
222
+ }
223
+ });
224
+ delta.ops = ops;
225
+ return delta;
226
+ });
227
+ }, [quill, pasteAsText]);
228
+ useEffect(() => {
229
+ if (quill && overrideValue !== undefined) {
230
+ const currentContent = quill.root.innerHTML;
231
+ if (currentContent !== overrideValue) {
232
+ const delta = quill.clipboard.convert({
233
+ html: overrideValue
234
+ });
235
+ quill.setContents(delta);
236
+ }
237
+ }
238
+ }, [quill, overrideValue]);
239
+ useEffect(() => {
240
+ if (quill && (disabled || readOnly)) {
241
+ quill.enable(false);
242
+ } else if (quill) {
243
+ quill.enable(true);
244
+ }
245
+ }, [readOnly, quill]);
261
246
  return _jsxs("div", {
262
247
  css: theme => [styles.default(theme, maxHeight)],
263
248
  children: [label && _jsx(Label, {
@@ -272,7 +257,7 @@ const QuillEditor = /*#__PURE__*/forwardRef(({
272
257
  ...style
273
258
  },
274
259
  children: _jsx("div", {
275
- ref: containerRef
260
+ id: `editor${editorId.current}`
276
261
  })
277
262
  }), invalidMessage && _jsx(ErrorWrapper, {
278
263
  children: _jsxs(Text, {
@@ -284,5 +269,5 @@ const QuillEditor = /*#__PURE__*/forwardRef(({
284
269
  })
285
270
  })]
286
271
  });
287
- });
272
+ };
288
273
  export default QuillEditor;
package/lib/core/QuillEditor/models.d.ts CHANGED
@@ -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?: (value: string) => void;
64
- onBlur?: (value: string) => void;
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;
package/lib/core/QuillEditor/models.d.ts.map CHANGED
@@ -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;AAEzB,UAAU,kBAAkB;IAE1B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,OAAO,CAAA;IAGhB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IAGtB,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAA;IAGhE,IAAI,CAAC,EAAE;QACL,OAAO,CAAC,EAAE,OAAO,CAAA;QACjB,MAAM,CAAC,EAAE,OAAO,CAAA;KACjB,CAAA;IAGD,MAAM,CAAC,EAAE;QACP,GAAG,CAAC,EAAE,OAAO,CAAA;QACb,KAAK,CAAC,EAAE,OAAO,CAAA;KAChB,CAAA;IAGD,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,OAAO,CAAA;QACd,IAAI,CAAC,EAAE,OAAO,CAAA;KACf,CAAA;IAGD,SAAS,CAAC,EAAE;QACV,GAAG,CAAC,EAAE,OAAO,CAAA;KACd,CAAA;IAGD,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAA;IAGrD,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,CAAA;IAC1B,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,CAAA;IAG/B,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,CAAA;IAGzB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAA;IAGtD,KAAK,CAAC,EAAE,OAAO,CAAA;IAGf,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,UAAU,gBAAgB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;IAC3C,aAAa,CAAC,EAAE;QACd,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAA;KAC/B,CAAA;IACD,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,CAAA;IAC7B,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ;AAED,UAAU,cAAc;IACtB,QAAQ,EAAE,MAAM,GAAG,CAAA;IACnB,SAAS,EAAE,MAAM,cAAc,GAAG,IAAI,CAAA;CACvC;AAED,UAAU,QAAQ;IAChB,OAAO,EAAE,KAAK,GAAG,IAAI,CAAA;CACtB;AAED,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAA"}
1
+ {"version":3,"file":"models.d.ts","sourceRoot":"","sources":["../../../src/packages/core/QuillEditor/models.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bbl-digital/snorre",
3
- "version": "4.1.14",
3
+ "version": "4.1.15",
4
4
  "description": "Design library for BBL Digital",
5
5
  "license": "MIT",
6
6
  "main": "./lib/index.js",