fix: styling fixes, hack to make the text flicker appear

Author: kemuru

web/package.json

@@ -91,7 +91,7 @@
     "@kleros/ui-components-library": "^2.20.0",
     "@lifi/wallet-management": "^3.7.1",
     "@lifi/widget": "^3.18.1",
-    "@mdxeditor/editor": "^3.44.2",
+    "@mdxeditor/editor": "^3.45.0",
     "@reown/appkit": "^1.7.1",
     "@reown/appkit-adapter-wagmi": "^1.7.1",
     "@sentry/react": "^7.120.0",

web/src/components/MarkdownEditor.tsx

@@ -31,33 +31,47 @@ import InfoIcon from "svgs/icons/info-circle.svg";
 const Container = styled.div<{ isEmpty: boolean }>`
   width: 100%;
 
-  [class*="mdxeditor"] {
-    background-color: ${({ theme }) => theme.whiteBackground} !important;
+  [class*="mdxeditor-toolbar"] {
+    background-color: ${({ theme }) => theme.lightGrey};
     border: 1px solid ${({ theme }) => theme.stroke} !important;
     border-radius: 3px;
     font-family: "Open Sans", sans-serif;
-  }
 
-  [class*="toolbar"] {
-    background-color: ${({ theme }) => theme.lightGrey} !important;
-    border-bottom: none !important;
+    * svg {
+      color: ${({ theme }) => theme.primaryText} !important;
+    }
 
-    button {
-      color: ${({ theme }) => theme.whiteBackground} !important;
+    [class*="selectTrigger"] {
+      background-color: ${({ theme }) => theme.whiteBackground} !important;
+      color: ${({ theme }) => theme.primaryText} !important;
+      cursor: pointer !important;
     }
 
-    svg {
-      fill: ${({ theme }) => theme.whiteBackground} !important;
+    button:hover {
+      background-color: ${({ theme }) => theme.lightGrey}80 !important;
+      cursor: pointer;
     }
 
-    select {
+    button[data-state="on"],
+    button[aria-pressed="true"] {
       background-color: ${({ theme }) => theme.whiteBackground} !important;
-      color: ${({ theme }) => theme.primaryText} !important;
+    }
+
+    button:disabled,
+    button[data-disabled="true"] {
+      opacity: 0.4 !important;
+      cursor: not-allowed !important;
+
+      svg {
+        color: ${({ theme }) => theme.secondaryText} !important;
+      }
     }
   }
 
   [class*="contentEditable"] {
     background-color: ${({ theme }) => theme.whiteBackground} !important;
+    border: 1px solid ${({ theme }) => theme.stroke} !important;
+    border-radius: 3px;
     color: ${({ theme }) => theme.primaryText} !important;
     min-height: 200px;
     padding: 16px;
@@ -165,7 +179,19 @@ const MarkdownEditor: React.FC<IMarkdownEditor> = ({
   const editorRef = useRef<MDXEditorMethods>(null);
 
   const handleChange = (markdown: string) => {
-    onChange(markdown);
+    const cleanedMarkdown = markdown === "\u200B" ? "" : markdown.replace(/^\u200B/, "");
+    onChange(cleanedMarkdown);
+  };
+
+  const handleContainerClick = () => {
+    if (isEmpty && editorRef.current) {
+      editorRef.current.setMarkdown("\u200B");
+      setTimeout(() => {
+        if (editorRef.current) {
+          editorRef.current.focus();
+        }
+      }, 0);
+    }
   };
 
   const isEmpty = !value || value.trim() === "";
@@ -204,7 +230,7 @@ const MarkdownEditor: React.FC<IMarkdownEditor> = ({
   };
 
   return (
-    <Container isEmpty={isEmpty}>
+    <Container isEmpty={isEmpty} onClick={handleContainerClick}>
       <MDXEditor ref={editorRef} {...editorProps} />
       {showMessage && (
         <MessageContainer>

yarn.lock

@@ -6791,7 +6791,7 @@ __metadata:
     "@kleros/ui-components-library": "npm:^2.20.0"
     "@lifi/wallet-management": "npm:^3.7.1"
     "@lifi/widget": "npm:^3.18.1"
-    "@mdxeditor/editor": "npm:^3.44.2"
+    "@mdxeditor/editor": "npm:^3.45.0"
     "@reown/appkit": "npm:^1.7.1"
     "@reown/appkit-adapter-wagmi": "npm:^1.7.1"
     "@sentry/react": "npm:^7.120.0"
@@ -7635,7 +7635,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mdxeditor/editor@npm:^3.44.2":
+"@mdxeditor/editor@npm:^3.45.0":
   version: 3.45.0
   resolution: "@mdxeditor/editor@npm:3.45.0"
   dependencies: