From d234e8221882075b52fdc8b3ede85b3dd8b12981 Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Thu, 31 Oct 2024 13:36:21 +0000
Subject: [PATCH] fix: update wywiwyg logic

---
 .../RichEditor/FontSizeController/index.tsx    | 18 ++++++++++++++----
 .../chart-wrapper/useRenderChartFromAPI.ts     |  2 +-
 .../reportSubHeaderToolbar/staticToolbar.tsx   | 16 +++++++++++++---
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/app/modules/common/RichEditor/FontSizeController/index.tsx b/src/app/modules/common/RichEditor/FontSizeController/index.tsx
index 34591b9a3..847694112 100644
--- 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
index 7fd0d4f20..f58a0aac0 100644
--- 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
index 95915360e..0839e9771 100644
--- 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,6 +77,7 @@ 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 && (
@@ -85,6 +85,15 @@ export default function StaticToolbar(props: { plugins: ToolbarPluginsType }) {
           {
             // 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} />