diff --git a/dist/components/form/components/FormRichText.d.ts b/dist/components/form/components/FormRichText.d.ts index dae08f4..0c4bf7a 100644 --- a/dist/components/form/components/FormRichText.d.ts +++ b/dist/components/form/components/FormRichText.d.ts @@ -5,7 +5,7 @@ export interface QuillEditorProps { style?: CSSProperties; id?: string; modules?: Record; - onChange?: (value: string) => string; + onChange?: (value: string) => void; value?: string; } declare const _default: React.ForwardRefExoticComponent>; diff --git a/dist/components/form/components/FormRichText.d.ts.map b/dist/components/form/components/FormRichText.d.ts.map index 1c95770..2e8d7e0 100644 --- a/dist/components/form/components/FormRichText.d.ts.map +++ b/dist/components/form/components/FormRichText.d.ts.map @@ -1 +1 @@ -{"version":3,"file":"FormRichText.d.ts","sourceRoot":"","sources":["../../../../src/components/form/components/FormRichText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKE,aAAa,EAC5B,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAG,MAAM,KAAK,MAAM,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;;AA4CD,wBAAwC"} \ No newline at end of file +{"version":3,"file":"FormRichText.d.ts","sourceRoot":"","sources":["../../../../src/components/form/components/FormRichText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKE,aAAa,EAC5B,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAG,MAAM,KAAK,IAAI,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;;AA4CD,wBAAwC"} \ No newline at end of file diff --git a/src/components/form/components/FormRichText.tsx b/src/components/form/components/FormRichText.tsx index 92a7490..9ecb437 100644 --- a/src/components/form/components/FormRichText.tsx +++ b/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, - onChange?: (value : string) => string; - value?: string, +export interface QuillEditorProps { + className?: string; + style?: CSSProperties; + id?: string; + modules?: Record; + onChange?: (value: string) => void; + value?: string; } -const FormRichText: React.ForwardRefRenderFunction = ({modules, value, onChange, ...rest } :QuillEditorProps, ref: ForwardedRef) => { +const FormRichText: React.ForwardRefRenderFunction = ( + { modules, value, onChange, ...rest }: QuillEditorProps, + ref: ForwardedRef +) => { const editorRef = useRef(null); const quillRef = useRef(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 = ({ 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
-} - + return
; +}; export default forwardRef(FormRichText); -