Allow onChange to be string or void

Author: Jamie-n

dist/components/form/components/FormRichText.d.ts

@@ -5,7 +5,7 @@ export interface QuillEditorProps {
     style?: CSSProperties;
     id?: string;
     modules?: Record<string, unknown>;
-    onChange?: (value: string) => string;
+    onChange?: (value: string) => string | void;
     value?: string;
 }
 declare const _default: React.ForwardRefExoticComponent<QuillEditorProps & React.RefAttributes<Quill>>;

src/components/form/components/FormRichText.tsx

@@ -3,24 +3,40 @@ import React, {
   useRef,
   useImperativeHandle,
   forwardRef,
-  ForwardedRef, CSSProperties,
+  ForwardedRef,
+  CSSProperties,
 } from 'react';
 import Quill from 'quill';
 
-
-export interface QuillEditorProps{
-  className?: string,
-  style?: CSSProperties,
-  id?: string,
-  modules?: Record<string, unknown>,
-  onChange?: (value : string) => string;
-  value?: string,
+export interface QuillEditorProps {
+  className?: string;
+  style?: CSSProperties;
+  id?: string;
+  modules?: Record<string, unknown>;
+  onChange?: (value: string) => string | void;
+  value?: string;
 }
 
-const FormRichText: React.ForwardRefRenderFunction<Quill, QuillEditorProps> = ({modules, value, onChange, ...rest } :QuillEditorProps, ref: ForwardedRef<Quill>) => {
+const FormRichText: React.ForwardRefRenderFunction<Quill, QuillEditorProps> = (
+  { modules, value, onChange, ...rest }: QuillEditorProps,
+  ref: ForwardedRef<Quill>
+) => {
   const editorRef = useRef<HTMLDivElement | null>(null);
   const quillRef = useRef<Quill | null>(null);
 
+  const setValue = (quillRef: Quill) => {
+    const delta = quillRef.clipboard.convert({ html: value });
+    quillRef.setContents(delta, 'silent');
+  };
+
+  const configureListeners = (quill: Quill) => {
+    quill.on('text-change', () => {
+      if (onChange) {
+        onChange(quillRef.current?.getSemanticHTML() || '');
+      }
+    });
+  };
+
   useEffect(() => {
     if (editorRef.current) {
       const quill = new Quill(editorRef.current, modules);
@@ -38,26 +54,11 @@ const FormRichText: React.ForwardRefRenderFunction<Quill, QuillEditorProps> = ({
         configureListeners(quill);
       }
     }
-  }, []);
+  });
 
   useImperativeHandle(ref, () => quillRef.current as Quill);
 
-  const setValue = (quillRef: Quill) => {
-    const delta = quillRef.clipboard.convert({html: value})
-    quillRef.setContents(delta, 'silent')
-  }
-
-  const configureListeners = (quill: Quill) => {
-    quill.on('text-change', (e) => {
-      if (onChange) {
-        onChange(quillRef.current?.getSemanticHTML() || '');
-      }
-    });
-  }
-
-  return <div ref={editorRef} style={rest.style} id={rest.id}/>
-}
-
+  return <div ref={editorRef} style={rest.style} id={rest.id} />;
+};
 
 export default forwardRef(FormRichText);
-