Solving browser warnings and refactoring some codes

shawkyebrahim2514 · Dec 11, 2024 · 06b8657 · 06b8657
1 parent 8b09c66
commit 06b8657
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 253 deletions.
diff --git a/react-frontend/package-lock.json b/react-frontend/package-lock.json
diff --git a/react-frontend/package.json b/react-frontend/package.json
@@ -26,8 +26,6 @@
     "react-spring": "^9.7.4",
     "rehype-stringify": "^10.0.1",
     "remark-breaks": "^4.0.0",
-    "remark-directive": "^3.0.0",
-    "remark-directive-rehype": "^0.4.2",
     "remark-gfm": "^4.0.0",
     "unist-util-visit": "^5.0.0",
     "uuid": "^11.0.2",

diff --git a/react-frontend/src/components/Button/index.tsx b/react-frontend/src/components/Button/index.tsx
@@ -32,6 +32,7 @@ type ButtonProps = {
 export default function Button({ icon, text, onClick, size = "lg", style, pointer, children }: ButtonProps) {
     const { theme } = useThemeContext();
     const buttonStyle = useMemo(() => css({
+        display: "inline-block",
         padding: differentSizes[size].padding,
         fontSize: differentSizes[size].fontSize,
         cursor: pointer ? "pointer" : "default",
@@ -45,13 +46,13 @@ export default function Button({ icon, text, onClick, size = "lg", style, pointe
     }, [onClick]);
 
     return (
-        <div
+        <span
             css={buttonStyle}
             onClick={onClick}
             onKeyDown={handleKeyDown} >
             {icon}
             {text}
             {children}
-        </div >
+        </span >
     )
 }
diff --git a/react-frontend/src/components/HTMLMarkdown/BlockquoteMarkdown.tsx b/react-frontend/src/components/HTMLMarkdown/BlockquoteMarkdown.tsx
@@ -5,6 +5,7 @@ import MainSection from '../MainSection';
 import { toJsxRuntime } from 'hast-util-to-jsx-runtime'
 import { Fragment, jsx, jsxs } from 'react/jsx-runtime'
 import { markdownComponents } from '.';
+import { v4 as uuid } from 'uuid';
 
 type BlockquoteElementType = "highlight-background" | "without-background";
 type BlockquoteColorType = "base" | "secondary";
@@ -19,14 +20,17 @@ type BlockquoteMarkdownProps = {
 
 const BlockquoteMarkdown = ({ node, className, ...props }: BlockquoteMarkdownProps) => {
     const { theme } = useThemeContext();
-    const contentJSXElementsFromAST = useMemo(() => (
-        node?.children.map((element) => toJsxRuntime(element as RootContent, {
+    const contentJSXElementsFromAST = useMemo(() => {
+        let content = node?.children.map((element) => toJsxRuntime(element as RootContent, {
             Fragment, jsx, jsxs, passNode: true, components: {
                 ...markdownComponents,
                 br: () => null,
-            }
-        }))
-    ), [node?.children]);
+            },
+        }));
+        return content?.map((element) => (
+            <Fragment key={uuid()}>{element}</Fragment>
+        ));
+    }, [node?.children]);
 
     const targetElement = useMemo((): TargetElementType => ({
         "highlight-background": {
@@ -64,27 +68,28 @@ const BlockquoteMarkdown = ({ node, className, ...props }: BlockquoteMarkdownPro
         );
     }
 
-    return (<div
-        {...props as React.HTMLAttributes<HTMLDivElement>}
-        className='blockquote'
-        style={{
-            ...props.style,
-            padding: "0 1rem",
-            position: "relative",
-            margin: "1rem 0",
-            backgroundColor: `${colors.containerBackgroundColor}`,
-            color: `${colors.barColor}`
-        }}>
-        <div style={{
-            position: "absolute",
-            left: 0,
-            height: "100%",
-            top: 0,
-            backgroundColor: `${colors.barColor}`,
-            width: "5px",
-        }} />
-        {contentJSXElementsFromAST}
-    </div>);
+    return (
+        <div
+            {...props as React.HTMLAttributes<HTMLDivElement>}
+            style={{
+                ...props.style,
+                padding: "0 1rem",
+                position: "relative",
+                margin: "1rem 0",
+                backgroundColor: `${colors.containerBackgroundColor}`,
+                color: `${colors.barColor}`
+            }}>
+            <div style={{
+                position: "absolute",
+                left: 0,
+                height: "100%",
+                top: 0,
+                backgroundColor: `${colors.barColor}`,
+                width: "5px",
+            }} />
+            {contentJSXElementsFromAST}
+        </div>
+    );
 }
 
 export default BlockquoteMarkdown