replaced react-quill with react-quill-new

raheeliftikhar5 · raheeliftikhar5 · commit fa16021cb396 · 2025-04-29T16:06:01.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
@@ -8,7 +8,7 @@ import { UICompBuilder, withDefault } from "comps/generators";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
 import { Section, sectionNames } from "lowcoder-design";
 import React, { ChangeEvent, Suspense, useEffect, useRef, useState } from "react";
-import type ReactQuill from "react-quill";
+import type ReactQuill from "react-quill-new";
 import { useDebounce } from "react-use";
 import styled, { css } from "styled-components";
 import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConstants";
@@ -198,7 +198,7 @@ interface IProps {
   contentScrollBar: boolean;
 }
 
-const ReactQuillEditor = React.lazy(() => import("react-quill"));
+const ReactQuillEditor = React.lazy(() => import("react-quill-new"));
 
 function RichTextEditor(props: IProps) {
   const [key, setKey] = useState(0);
diff --git a/client/packages/lowcoder/src/index.less b/client/packages/lowcoder/src/index.less
@@ -6,7 +6,7 @@
 
 // fixme: move into comps
 @import "github-markdown-css/github-markdown-light.css";
-@import "react-quill/dist/quill.snow.css";
+@import "react-quill-new/dist/quill.snow.css";
 @import "tui-image-editor/dist/tui-image-editor.css";
 @import "tui-color-picker/dist/tui-color-picker.min.css";
 
diff --git a/client/packages/lowcoder/src/pages/support/supportDetail.tsx b/client/packages/lowcoder/src/pages/support/supportDetail.tsx
@@ -13,9 +13,12 @@ import { SUPPORT_URL } from "constants/routesURL";
 import { TacoMarkDown } from "lowcoder-design";
 import remarkGfm from 'remark-gfm';
 import { contrastColor } from "comps/controls/styleControlConstants";
-import ReactQuill from 'react-quill';
-import 'react-quill/dist/quill.snow.css';
+import 'react-quill-new/dist/quill.snow.css';
 import { useCurrentUser } from "util/currentUser";
+import React from "react";
+
+const ReactQuillEditor = React.lazy(() => import("react-quill-new"));
+
 
 const { Title, Text } = Typography;
 const { TextArea } = Input;
@@ -455,7 +458,7 @@ export function SupportDetail() {
                 value={newDescription}
                 onChange={(e) => setNewDescription(e.target.value)}
               /> */}
-              <ReactQuill
+              <ReactQuillEditor
                 theme="snow"
                 value={newDescription}
                 onChange={setNewDescription}
diff --git a/client/packages/lowcoder/src/pages/support/supportOverview.tsx b/client/packages/lowcoder/src/pages/support/supportOverview.tsx
@@ -11,14 +11,16 @@ import { Avatar, Flex, Tooltip } from "antd";
 import { buildSupportTicketLink } from "constants/routesURL";
 import history from "util/history";
 import { Input } from "antd";
-import ReactQuill from "react-quill";
-import 'react-quill/dist/quill.snow.css';
+import 'react-quill-new/dist/quill.snow.css';
 import { Spin } from "antd";
 import LoadingOutlined from "@ant-design/icons/LoadingOutlined";
 import { useSimpleSubscriptionContext } from "@lowcoder-ee/util/context/SimpleSubscriptionContext";
 import { SubscriptionProductsEnum } from '@lowcoder-ee/constants/subscriptionConstants';
 import { getDeploymentId } from "@lowcoder-ee/redux/selectors/configSelectors";
 import { useSelector } from "react-redux";
+import React from "react";
+
+const ReactQuillEditor = React.lazy(() => import("react-quill-new"));
 
 const SupportWrapper = styled.div`
   display: flex;
@@ -268,7 +270,7 @@ export function SupportOverview() {
                   <div>
                     <div style={{ marginBottom: '16px' }}>{trans("support.createTicketDescriptionTitle")}</div>
                   </div>
-                  <ReactQuill
+                  <ReactQuillEditor
                     style={{ height: '200px'}}
                     value={description}
                     onChange={setDescription}
