fix: update wywiwyg logic

zimmerman-team · Oct 31, 2024 · d234e82 · d234e82
1 parent 7a775a5
commit d234e82
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 8 deletions.
diff --git a/src/app/modules/common/RichEditor/FontSizeController/index.tsx b/src/app/modules/common/RichEditor/FontSizeController/index.tsx
@@ -1,5 +1,4 @@
-import { EditorState, RichUtils, ContentState, Modifier } from "draft-js";
-import { set } from "lodash";
+import { EditorState, RichUtils } from "draft-js";
 import React, { useEffect } from "react";
 
 interface Props {
@@ -31,9 +30,20 @@ export default function FontSizeController(props: Props) {
       const size = nfontSize.split("-")[2];
       setFontSize(Number(size));
     } else {
-      setFontSize(14);
+      const type = props
+        .getEditorState()
+        .getCurrentContent()
+        .getBlockForKey(props.getEditorState().getSelection().getStartKey())
+        .getType();
+      if (type === "header-one") {
+        setFontSize(28);
+      } else if (type === "header-two") {
+        setFontSize(21);
+      } else {
+        setFontSize(14);
+      }
     }
-  }, [props.getEditorState().getCurrentInlineStyle()]);
+  }, [props.getEditorState()]);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     //number validation with regex so input only accepts number characters

diff --git a/src/app/modules/report-module/components/chart-wrapper/useRenderChartFromAPI.ts b/src/app/modules/report-module/components/chart-wrapper/useRenderChartFromAPI.ts
@@ -26,7 +26,7 @@ export const useRenderChartFromAPI = (
   const [loadedChartsList, setLoadedChartsList] = useRecoilState(
     loadedChartsInReportAtom
   );
-  console.log("loadedChartsList", loadedChartsList);
+
   const fetchRenderChart = async (id: string) => {
     setLoading(true);
     setNotFound(false);

diff --git a/src/app/modules/report-module/components/reportSubHeaderToolbar/staticToolbar.tsx b/src/app/modules/report-module/components/reportSubHeaderToolbar/staticToolbar.tsx
@@ -42,7 +42,6 @@ export type ToolbarPluginsType = (
 
 export default function StaticToolbar(props: { plugins: ToolbarPluginsType }) {
   const isDesktop = useMediaQuery("(min-width: 1118px)");
-
   //control modals for color and background color pickers
   const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
   const [activeColorModal, setActiveColorModal] = React.useState<
@@ -78,13 +77,23 @@ export default function StaticToolbar(props: { plugins: ToolbarPluginsType }) {
   const linkInputComponent = document.querySelector(
     "input[placeholder='Enter a URL and press enter']"
   );
+
   return (
     <div>
       {props.plugins.length > 0 && (
         <Toolbar>
           {
             // may be use React.Fragment instead of div to improve perfomance after React 16
             (externalProps) => {
+              const currentStyle = externalProps
+                .getEditorState()
+                .getCurrentInlineStyle();
+              const textColour = currentStyle.findLast((style: any) =>
+                style.includes("color-")
+              );
+              const textBgColour = currentStyle.findLast((style: any) =>
+                style.includes("bg-")
+              );
               const restIcons = (
                 <>
                   <div
@@ -135,7 +144,7 @@ export default function StaticToolbar(props: { plugins: ToolbarPluginsType }) {
                     onClick={(e) => handleClick(e, "color")}
                     id={colorId}
                     tabIndex={0} // Add tabIndex attribute to make the div focusable
-                    css={commonstyles.highlightPicker(colorOpen)}
+                    css={commonstyles.highlightPicker(!!textColour)}
                   >
                     {HiglightPicker}
                   </div>
@@ -145,7 +154,7 @@ export default function StaticToolbar(props: { plugins: ToolbarPluginsType }) {
                     onClick={(e) => handleClick(e, "bg")}
                     id={bgId}
                     tabIndex={0} // Add tabIndex attribute to make the div focusable
-                    css={commonstyles.highlightPicker(bgOpen)}
+                    css={commonstyles.highlightPicker(!!textBgColour)}
                   >
                     {BGHiglightPicker}
                   </div>
@@ -164,6 +173,7 @@ export default function StaticToolbar(props: { plugins: ToolbarPluginsType }) {
                   <div>
                     <FontSizeController {...externalProps} />
                   </div>
+
                   <HeaderOneButton {...externalProps} />
                   <HeaderTwoButton {...externalProps} />
                   <BlockquoteButton {...externalProps} />