image upload

www/package.json

@@ -31,6 +31,8 @@
     "lodash": "^4.17.15",
     "query-string": "^6.8.3",
     "quill-delta": "^4.2.1",
+    "quill-image-drop-module": "^1.0.3",
+    "quill-image-resize-module": "^3.0.0",
     "ramda": "^0.26.1",
     "react": "^16.9.0",
     "react-color": "^2.17.3",

www/src/components/RichTextEditor.jsx

@@ -2,13 +2,17 @@ import React, { useContext, useRef, useEffect } from "react";
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
 import EditorContext from "contexts/editorContext";
 import { FieldType } from "./Fields";
-import ReactQuill from "react-quill";
+import ReactQuill, { Quill } from "react-quill";
+import { ImageDrop } from "quill-image-drop-module";
 import Delta from "quill-delta";
 import "react-quill/dist/quill.snow.css";
 import { bucket } from "../firebase";
 
 import EditorModel from "./EditorModal";
-const useStyles = makeStyles((theme: Theme) =>
+
+Quill.register("modules/imageDrop", ImageDrop);
+
+const useStyles = makeStyles(theme =>
   createStyles({
     test: { position: "absolute", top: 10, left: 10 },
     modal: {
@@ -117,22 +121,20 @@ const useStyles = makeStyles((theme: Theme) =>
     },
   })
 );
-interface Props {}
 
-async function asyncUploader(ref: any, file: File) {
-  const documentRef = bucket.ref("test").child(ref);
+async function asyncUploader(ref, file) {
+  const documentRef = bucket.ref("RTE").child(ref);
   const snapShot = await documentRef.put(file);
   const downloadUrl = await bucket
-    .ref("test")
+    .ref("RTE")
     .child(snapShot.metadata.fullPath)
     .getDownloadURL();
   return downloadUrl;
 }
-const imageHandler = (quillRef: any) => () => {
+const imageHandler = quillRef => () => {
   const now = new Date();
-
   const quill = quillRef.current.getEditor();
-  let fileInput: any = document.body.querySelector("input.ql-image[type=file]");
+  let fileInput = document.body.querySelector("input.ql-image[type=file]");
   if (fileInput == null) {
     fileInput = document.createElement("input");
     fileInput.setAttribute("type", "file");
@@ -142,9 +144,11 @@ const imageHandler = (quillRef: any) => () => {
     );
     fileInput.classList.add("ql-image");
     fileInput.addEventListener("change", async () => {
+      console.log("detected file");
       if (fileInput.files != null && fileInput.files[0] != null) {
         const ref = `quill-images/${now.getTime()}/${fileInput.files[0].name}`;
         const downloadUrl = await asyncUploader(ref, fileInput.files[0]);
+        console.log(downloadUrl);
         let range = quill.getSelection(true);
         quill.updateContents(
           new Delta()
@@ -163,20 +167,19 @@ const imageHandler = (quillRef: any) => () => {
   fileInput.click();
 };
 
-const RichTextEditor = (props: Props) => {
+const RichTextEditor = props => {
   const classes = useStyles();
   const editorContext = useContext(EditorContext);
   const quillRef = useRef(null);
   useEffect(() => {
-    if (quillRef !== null && quillRef.current) {
-      // quillRef.current
-      //   .getEditor()
-      //   .getModule("toolbar")
-      //   .addHandler("image", imageHandler(quillRef));
+    if (quillRef.current) {
+      quillRef.current
+        .getEditor()
+        .getModule("toolbar")
+        .addHandler("image", imageHandler(quillRef));
     }
   }, [quillRef]);
   if (editorContext.fieldType !== FieldType.richText) return <></>;
-  const isOpen = editorContext.editorValue !== null;
   return (
     <EditorModel>
       <ReactQuill
@@ -196,6 +199,10 @@ const RichTextEditor = (props: Props) => {
         className={classes.quillEditor}
         //  preserveWhiteSpace
         modules={{
+          // toolbar: [
+          //   ['image']
+          // ],
+          imageDrop: true,
           toolbar: {
             container: [
               ["bold", "italic", "underline"],
@@ -203,7 +210,7 @@ const RichTextEditor = (props: Props) => {
 
               [{ list: "bullet" }, { list: "ordered" }],
               [{ indent: "-1" }, { indent: "+1" }],
-              ["blockquote", "code-block", "video"],
+              ["blockquote", "code-block", "image", "video"],
               ["link"],
             ],
           },

www/yarn.lock

@@ -10085,7 +10085,23 @@ quill-delta@^4.2.1:
     extend "^3.0.2"
     fast-diff "1.2.0"
 
-quill@^1.2.6:
+quill-image-drop-module@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/quill-image-drop-module/-/quill-image-drop-module-1.0.3.tgz#0e5ec8329dd67a12126f166b191bf64d2057a7d3"
+  integrity sha1-Dl7IMp3WehISbxZrGRv2TSBXp9M=
+  dependencies:
+    quill "^1.2.2"
+
+quill-image-resize-module@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/quill-image-resize-module/-/quill-image-resize-module-3.0.0.tgz#0fd93746a837336d95b2f536140416a623c71771"
+  integrity sha1-D9k3Rqg3M22VsvU2FAQWpiPHF3E=
+  dependencies:
+    lodash "^4.17.4"
+    quill "^1.2.2"
+    raw-loader "^0.5.1"
+
+quill@^1.2.2, quill@^1.2.6:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/quill/-/quill-1.3.7.tgz#da5b2f3a2c470e932340cdbf3668c9f21f9286e8"
   integrity sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==
@@ -10149,6 +10165,11 @@ raw-body@^2.3.2:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+raw-loader@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-0.5.1.tgz#0c3d0beaed8a01c966d9787bf778281252a979aa"
+  integrity sha1-DD0L6u2KAclm2Xh793goElKpeao=
+
 rc@^1.2.7:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"