Update RichText component to use forwarding & add theme prop

the-curve-consulting · Jun 18, 2024 · 6444526 · 6444526
1 parent ec032b4
commit 6444526
Show file tree

Hide file tree

Showing 10 changed files with 61 additions and 27 deletions.
diff --git a/dist/components/form/Form.d.ts b/dist/components/form/Form.d.ts
@@ -18,7 +18,10 @@ declare const Form: {
         ({ type, className, ...rest }: import("./components/FormCheck").FormCheckProps): React.JSX.Element;
         Feedback: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap/esm/Feedback").FeedbackProps>;
     };
-    RichText: ({ modules, value, valueChange, ...rest }: import("./components/FormRichText").QuillEditorProps) => React.JSX.Element;
+    RichText: {
+        ({ theme, modules, value, onChange, ...rest }: import("./components/FormRichText").QuillEditorProps): React.JSX.Element;
+        Feedback: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap/esm/Feedback").FeedbackProps>;
+    };
     DateTime: {
         ({ className, ...rest }: import("./components/FormDateTime").FormDateTimeProps): React.JSX.Element;
         Feedback: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap/esm/Feedback").FeedbackProps>;

diff --git a/dist/components/form/Form.d.ts.map b/dist/components/form/Form.d.ts.map
diff --git a/dist/components/form/components/FormRichText.d.ts b/dist/components/form/components/FormRichText.d.ts
@@ -5,8 +5,12 @@ export interface QuillEditorProps {
     id?: string;
     modules?: Record<string, unknown>;
     value?: string;
-    valueChange?(value: string): any;
+    theme?: string;
+    onChange?(value: string): any;
 }
-declare const FormRichText: ({ modules, value, valueChange, ...rest }: QuillEditorProps) => React.JSX.Element;
+declare const FormRichText: {
+    ({ theme, modules, value, onChange, ...rest }: QuillEditorProps): React.JSX.Element;
+    Feedback: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap/Feedback").FeedbackProps>;
+};
 export default FormRichText;
 //# sourceMappingURL=FormRichText.d.ts.map
diff --git a/dist/components/form/components/FormRichText.d.ts.map b/dist/components/form/components/FormRichText.d.ts.map
diff --git a/dist/components/form/components/FormRichText.js b/dist/components/form/components/FormRichText.js
diff --git a/dist/components/form/components/FormRichText.js.map b/dist/components/form/components/FormRichText.js.map
diff --git a/dist/index.es.js b/dist/index.es.js
diff --git a/dist/index.js b/dist/index.js
@@ -25532,24 +25532,25 @@ Quill.register({
 }, true);
 
 var FormRichText = function (_a) {
-    var modules = _a.modules, value = _a.value, valueChange = _a.valueChange, rest = __rest(_a, ["modules", "value", "valueChange"]);
+    var theme = _a.theme, modules = _a.modules, value = _a.value, onChange = _a.onChange, rest = __rest(_a, ["theme", "modules", "value", "onChange"]);
     var editorRef = React.useRef(null);
     var quillRef = React.useRef(null);
+    var quillOptions = __assign(__assign({}, modules), { theme: theme || 'snow' });
     var setValue = function (quillRef) {
         var delta = quillRef.clipboard.convert({ html: value });
         quillRef.setContents(delta, 'silent');
     };
     var configureListeners = function (quill) {
         quill.on('text-change', function () {
             var _a;
-            if (valueChange) {
-                valueChange(((_a = quillRef.current) === null || _a === void 0 ? void 0 : _a.getSemanticHTML()) || '');
+            if (onChange) {
+                onChange(((_a = quillRef.current) === null || _a === void 0 ? void 0 : _a.getSemanticHTML()) || '');
             }
         });
     };
     React.useEffect(function () {
         if (editorRef.current) {
-            var quill = new Quill(editorRef.current, modules);
+            var quill = new Quill(editorRef.current, quillOptions);
             quillRef.current = quill; // Store the Quill instance in a ref
             if (value) {
                 setValue(quill);
@@ -25559,6 +25560,7 @@ var FormRichText = function (_a) {
     }, []);
     return React.createElement("div", { ref: editorRef, style: rest.style, id: rest.id });
 };
+FormRichText.Feedback = Feedback$1;
 
 var FormDateTime = function (_a) {
     var className = _a.className, rest = __rest(_a, ["className"]);

diff --git a/dist/index.min.js b/dist/index.min.js
diff --git a/src/components/form/components/FormRichText.tsx b/src/components/form/components/FormRichText.tsx
@@ -1,41 +1,49 @@
 import React, { useRef, CSSProperties, useEffect } from 'react';
 import Quill from 'quill';
+import Feedback from 'react-bootstrap/Feedback';
 
 export interface QuillEditorProps {
   className?: string;
   style?: CSSProperties;
   id?: string;
   modules?: Record<string, unknown>;
   value?: string;
+  theme?: string;
 
-  valueChange?(value: string): any;
+  onChange?(value: string): any;
 }
 
 const FormRichText = ({
+  theme,
   modules,
   value,
-  valueChange,
+  onChange,
   ...rest
 }: QuillEditorProps) => {
   const editorRef = useRef<HTMLDivElement | null>(null);
   const quillRef = useRef<Quill | null>(null);
 
+  const quillOptions = {
+    ...modules,
+    theme: theme || 'snow',
+  };
+
   const setValue = (quillRef: Quill) => {
     const delta = quillRef.clipboard.convert({ html: value });
     quillRef.setContents(delta, 'silent');
   };
 
   const configureListeners = (quill: Quill) => {
     quill.on('text-change', () => {
-      if (valueChange) {
-        valueChange(quillRef.current?.getSemanticHTML() || '');
+      if (onChange) {
+        onChange(quillRef.current?.getSemanticHTML() || '');
       }
     });
   };
 
   useEffect(() => {
     if (editorRef.current) {
-      const quill = new Quill(editorRef.current, modules);
+      const quill = new Quill(editorRef.current, quillOptions);
       quillRef.current = quill; // Store the Quill instance in a ref
 
       if (value) {
@@ -47,4 +55,7 @@ const FormRichText = ({
 
   return <div ref={editorRef} style={rest.style} id={rest.id} />;
 };
+
+FormRichText.Feedback = Feedback;
+
 export default FormRichText;