@bbl-digital/snorre 4.1.14 → 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.
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":"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"}
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",