feat: finished export and cleanup

src/Components/Grants/GrantsShow.jsx

@@ -255,7 +255,12 @@ export default function GrantsShow() {
           onClose={() => setSectionToStoreAsBoilerplate(null)}
         />
       </Modal>
-      <ExportModal exportData={grant.sections} open={open} setOpen={setOpen} />{" "}
+      <ExportModal
+        exportData={grant.sections}
+        grantTitle={grant.title}
+        open={open}
+        setOpen={setOpen}
+      />{" "}
     </div>
   );
 }

src/Components/design/Export/Export.util.js

@@ -38,7 +38,6 @@ export async function generateWord(delta, config) {
   // if input is a raw quill delta
   if (delta.ops) {
     const parsedDelta = parseQuillDelta(delta);
-    console.log("parsedDelta", parsedDelta);
     parsedDeltas.push(parsedDelta);
     // if input is an array of parsed quill deltas
   } else if (Array.isArray(delta)) {
@@ -58,7 +57,6 @@ export async function generateWord(delta, config) {
   doc = setupDoc(parsedDeltas[0], config);
   // build docx sections
   for (const delta of parsedDeltas) {
-    console.log("delta", delta);
     sections.push(buildSection(delta.paragraphs, doc));
   }
   // add docx sections to doc
@@ -92,7 +90,6 @@ function setupDoc(parsedDelta, config) {
     numbering = addCustomBullets(numbering, config.customBulletLevels);
     customBullets = true;
   }
-  console.log("hyperlinks", hyperlinks);
   const doc = new Document({
     styles: {
       paragraphStyles: styles,

src/Components/design/Export/ExportModal.jsx

@@ -7,7 +7,7 @@ import { saveAs } from "file-saver";
 import "./ExportModal.css";
 import { generateWord } from "./Export.util";
 
-export default function ExportModal({ exportData, open, setOpen }) {
+export default function ExportModal({ exportData, grantTitle, open, setOpen }) {
   const quillEl = useRef(null);
   const [includeTitle, setIncludeTitle] = useState();
   // Documents contain sections, you can have multiple sections per document, go here to learn more about sections
@@ -16,11 +16,11 @@ export default function ExportModal({ exportData, open, setOpen }) {
   const newExport = async () => {
     const quillDelta = quillEl.current.getEditor().getContents();
     const doc = await generateWord(quillDelta, { exportAs: "blob" });
-    saveAs(doc, `example.docx`);
+    saveAs(doc, `${grantTitle}.docx`);
+    setOpen(!open);
   };
 
   const exportText = useMemo(() => {
-    // TODO: make this generic and also add a flag to access title or some other property
     const newText = [];
     exportData.forEach((item) => {
       includeTitle && newText.push(item.title);
@@ -46,6 +46,7 @@ export default function ExportModal({ exportData, open, setOpen }) {
         ref={quillEl}
         readOnly={true}
         value={exportText}
+        showToolbar={false}
       />
       <div className="export-editor-buttons">
         <Button onClick={() => setIncludeTitle(!includeTitle)}>
@@ -68,7 +69,8 @@ export default function ExportModal({ exportData, open, setOpen }) {
 ExportModal.propTypes = {
   exportData: PropTypes.array,
   open: PropTypes.bool.isRequired,
-  setOpen: PropTypes.bool.isRequired,
+  setOpen: PropTypes.func.isRequired,
+  grantTitle: PropTypes.string.isRequired,
 };
 
 ExportModal.defaultProps = {

src/Components/design/RichTextEditor/RichTextEditor.jsx

@@ -1,29 +1,54 @@
 import React, { forwardRef } from "react";
 import PropTypes from "prop-types";
 import ReactQuill from "react-quill";
-import { modules, formats } from "../../../config/ReactQuillConfig";
 import "react-quill/dist/quill.snow.css";
 import "./RichTextEditor.css";
 
-const RichTextEditor = forwardRef((props, ref) => {
-  return (
-    <ReactQuill
-      className={props.className}
-      modules={{ ...modules, toolbar: !props.readOnly }}
-      format={formats}
-      readOnly={props.readOnly}
-      {...props}
-      ref={ref}
-    />
-  );
-});
+const RichTextEditor = forwardRef(
+  ({ className, readOnly, value, onChange, showToolbar }, ref) => {
+    return (
+      <ReactQuill
+        className={className}
+        modules={
+          showToolbar
+            ? {
+                toolbar: [
+                  [{ header: [1, 2, false] }],
+                  ["bold", "italic", "underline", "strike", "blockquote"],
+                  [
+                    { list: "ordered" },
+                    { list: "bullet" },
+                    { indent: "-1" },
+                    { indent: "+1" },
+                  ],
+                  //this align menu includes four default text-align: left, right, center, justify
+                  [{ align: ["", "right", "center", "justify"] }],
+                  ["link", "image", "video", "formula"],
+                  //clean removes all formatting
+                  ["clean"],
+                ],
+              }
+            : { toolbar: [] }
+        }
+        readOnly={readOnly}
+        value={value}
+        onChange={onChange}
+        ref={ref}
+      />
+    );
+  }
+);
 
 RichTextEditor.propTypes = {
   className: PropTypes.string,
   readOnly: PropTypes.bool,
   value: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
+  onChange: PropTypes.func,
+  showToolbar: PropTypes.bool,
+};
+RichTextEditor.defaultProps = {
+  onChange: () => {},
+  showToolbar: true,
 };
-RichTextEditor.defaultProps = {};
 
 export default RichTextEditor;