RichTextEditor: Added Main Content Scrollbar

Author: MenamAfzal

client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx

@@ -79,9 +79,13 @@ const localizeStyle = css`
   }
 `;
 
-const commonStyle = (style: RichTextEditorStyleType) => css`
+const commonStyle = (style: RichTextEditorStyleType, contentScrollBar: boolean) => css`
   height: 100%;
 
+  .ql-editor::-webkit-scrollbar {
+    display: ${contentScrollBar ? "block" : "none"};
+  }
+
   & .ql-editor {
     min-height: 85px;
   }
@@ -126,11 +130,12 @@ const hideToolbarStyle = (style: RichTextEditorStyleType) => css`
 interface Props {
   $hideToolbar: boolean;
   $style: RichTextEditorStyleType;
+  $contentScrollBar: boolean;
 }
 
 const AutoHeightReactQuill = styled.div<Props>`
   ${localizeStyle}
-  ${(props) => commonStyle(props.$style)}
+  ${(props) => commonStyle(props.$style, props.$contentScrollBar)}
   & .ql-container .ql-editor {
     min-height: 125px;
   }
@@ -139,7 +144,7 @@ const AutoHeightReactQuill = styled.div<Props>`
 
 const FixHeightReactQuill = styled.div<Props>`
   ${localizeStyle}
-  ${(props) => commonStyle(props.$style)}
+  ${(props) => commonStyle(props.$style, props.$contentScrollBar)}
   & .quill {
     display: flex;
     flex-direction: column;
@@ -169,6 +174,7 @@ const childrenMap = {
   hideToolbar: BoolControl,
   readOnly: BoolControl,
   autoHeight: withDefault(AutoHeightControl, "fixed"),
+  contentScrollBar: withDefault(BoolControl, false),
   placeholder: withDefault(StringControl, trans("richTextEditor.placeholder")),
   toolbar: withDefault(StringControl, JSON.stringify(toolbarOptions)),
   onEvent: ChangeEventHandlerControl,
@@ -188,6 +194,7 @@ interface IProps {
   autoHeight: boolean;
   onChange: (value: string) => void;
   $style: RichTextEditorStyleType;
+  contentScrollBar: boolean;
 }
 
 const ReactQuillEditor = React.lazy(() => import("react-quill"));
@@ -264,6 +271,7 @@ function RichTextEditor(props: IProps) {
       ref={wrapperRef}
       $hideToolbar={props.hideToolbar}
       $style={props.$style}
+      $contentScrollBar={props.contentScrollBar}
     >
       <Suspense fallback={<Skeleton />}>
         <ReactQuillEditor
@@ -300,6 +308,7 @@ const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => {
       placeholder={props.placeholder}
       onChange={handleChange}
       $style={props.style}
+      contentScrollBar={props.contentScrollBar}
     />
   );
 })
@@ -325,6 +334,9 @@ const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => {
           <>
             <Section name={sectionNames.layout}>
               {children.autoHeight.getPropertyView()}
+              {!children.autoHeight.getView() && children.contentScrollBar.propertyView({
+                label: trans("prop.textAreaScrollBar"),
+              })}
               {children.toolbar.propertyView({ label: trans("richTextEditor.toolbar"), tooltip: trans("richTextEditor.toolbarDescription") })}
               {children.hideToolbar.propertyView({ label: trans("richTextEditor.hideToolbar") })}
             </Section>

client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx

@@ -75,6 +75,7 @@ let TextAreaTmpComp = (function () {
     autoHeight: withDefault(AutoHeightControl, "fixed"),
     style: styleControl(InputFieldStyle, 'style') , 
     labelStyle: styleControl(LabelStyle ,'labelStyle' ),
+    textAreaScrollBar: withDefault(BoolControl, false),
     inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
     animationStyle: styleControl(AnimationStyle, 'animationStyle')
   };
@@ -114,6 +115,10 @@ let TextAreaTmpComp = (function () {
           <><TextInputInteractionSection {...children} />
             <Section name={sectionNames.layout}>
               {children.autoHeight.getPropertyView()}
+              {!children.autoHeight.getView() &&
+                children.textAreaScrollBar.propertyView({
+                  label: trans("prop.textAreaScrollBar"),
+                })}
               {hiddenPropertyView(children)}
             </Section>
             <Section name={sectionNames.advanced}>

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -206,6 +206,7 @@ export const en = {
     "mainScrollbar": "Show Scrollbars in main content",
     "modalScrollbar": "Show Scrollbars in Modal",
     "drawerScrollbar": "Show Scrollbars in Drawer",
+    "textAreaScrollBar": "Show Scrollbars in Text Area",
     "siderRight" : "Show sider on the Right",
     "siderWidth" : "Sider Width",
     "siderWidthTooltip" : "Sider width supports percentages (%) and pixels (px).",

translations/locales/en.js

@@ -199,6 +199,7 @@ export const en = {
         "mainScrollbar": "Show Scrollbars in main content",
         "modalScrollbar": "Show Scrollbars in Modal",
         "drawerScrollbar": "Show Scrollbars in Drawer",
+        "textAreaScrollBar": "Show Scrollbars in Text Area",
         "siderRight": "Show sider on the Right",
         "siderWidth": "Sider Width",
         "siderWidthTooltip": "Sider width supports percentages (%) and pixels (px).",

translations/locales/en.ts

@@ -204,6 +204,7 @@ export const en = {
     "mainScrollbar": "Show Scrollbars in main content",
     "modalScrollbar": "Show Scrollbars in Modal",
     "drawerScrollbar": "Show Scrollbars in Drawer",
+    "textAreaScrollBar": "Show Scrollbars in Text Area",
     "siderRight" : "Show sider on the Right",
     "siderWidth" : "Sider Width",
     "siderWidthTooltip" : "Sider width supports percentages (%) and pixels (px).",