fix: fix react quill for Nextjs

novin-develop · Oct 26, 2022 · ceaa98d · ceaa98d
1 parent 82855e8
commit ceaa98d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 20 deletions.
diff --git a/packages/formalite/src/components/Formalite/elements/EditorView/Editor/EditorToolbar.tsx b/packages/formalite/src/components/Formalite/elements/EditorView/Editor/EditorToolbar.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
 import React from "react";
-import { Quill } from "react-quill";
 import RedoIcon from "@mui/icons-material/Redo";
 import UndoIcon from "@mui/icons-material/Undo";
 //
@@ -44,14 +43,6 @@ export function redoChange() {
   this.quill.history.redo();
 }
 
-const Size = Quill.import("attributors/style/size");
-Size.whitelist = FONT_SIZE;
-Quill.register(Size, true);
-
-const Font = Quill.import("attributors/style/font");
-Font.whitelist = FONT_FAMILY;
-Quill.register(Font, true);
-
 export const formats = [
   "align",
   "background",

diff --git a/packages/formalite/src/components/Formalite/elements/EditorView/EditorView.tsx b/packages/formalite/src/components/Formalite/elements/EditorView/EditorView.tsx
@@ -1,7 +1,6 @@
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { FormikProps, FormikValues } from "formik";
 import { OptionalObjectSchema } from "yup/lib/object";
-import ReactQuill from "react-quill";
 import { FormHelperText, Grid, InputLabel } from "@mui/material";
 import {
   checkIsRequired,
@@ -29,11 +28,14 @@ interface EditorViewProps<T> {
   validationSchema: OptionalObjectSchema<any>;
   translator: Function;
 }
+
+let ReactQuill = (...props: any) => <>a</>;
+
 const EditorView = <T extends FormikValues>(props: EditorViewProps<T>) => {
   const { allData, name, formik, loading, validationSchema, translator } =
     props;
   const { helperText, label, ...editorProps } = allData.editorProps;
-
+  const [load, setLoad] = useState(false);
   const id = useMemo(() => `minimal-quill-${handleRandomClassNameOrId()}`, []);
 
   const modules = useMemo(
@@ -59,7 +61,15 @@ const EditorView = <T extends FormikValues>(props: EditorViewProps<T>) => {
     [id]
   );
 
-  if (loading) {
+  useEffect(() => {
+    // eslint-disable-next-line global-require
+    ReactQuill = require("react-quill");
+    if (document) {
+      setLoad(true);
+    }
+  }, []);
+
+  if (loading && !load) {
     return (
       <Grid item {...allData.layoutProps}>
         <TextViewSkeleton height={253} hasHelper={!!helperText} />
@@ -97,19 +107,13 @@ const EditorView = <T extends FormikValues>(props: EditorViewProps<T>) => {
           className={`class-${id}`}
           isSimple={allData.editorProps.isToolbarSimple}
         />
-        {/* @ts-ignore */}
         <ReactQuill
           className={`class-${id}`}
           value={getData({ source: formik.values, key: name })}
           // value={editorValue}
           modules={modules}
           formats={formats}
-          onChange={(
-            value: string,
-            _delta: any,
-            _source: any,
-            editor: ReactQuill.UnprivilegedEditor
-          ) => {
+          onChange={(value: string, _delta: any, _source: any, editor: any) => {
             formik.setFieldValue(
               name,
               editor.getLength() > 1 ? value : formik.initialValues[name]