From daa9fdb7d93e1dec7decdd3b4e2db99448bf61ff Mon Sep 17 00:00:00 2001
From: Alex Lipovka <alex.lipovka@gmail.com>
Date: Tue, 7 Jan 2025 14:05:50 +0400
Subject: [PATCH] PATCH: set z-index of MDEditor toolbar to 0

By default @mdxeditor/editor/MDXEditor sets z-index for toolbar to 2
That interferes with select component
---
 .../MDEditorControl/MarkDownEditor/index.tsx  | 29 +++++++++----------
 .../MDEditorControl/MarkDownEditor/styles.ts  |  9 ++++++
 2 files changed, 22 insertions(+), 16 deletions(-)
 create mode 100644 src/components/BaseQuestionnaireResponseForm/widgets/MDEditorControl/MarkDownEditor/styles.ts

diff --git a/src/components/BaseQuestionnaireResponseForm/widgets/MDEditorControl/MarkDownEditor/index.tsx b/src/components/BaseQuestionnaireResponseForm/widgets/MDEditorControl/MarkDownEditor/index.tsx
index d22fe5e1..017340f5 100644
--- a/src/components/BaseQuestionnaireResponseForm/widgets/MDEditorControl/MarkDownEditor/index.tsx
+++ b/src/components/BaseQuestionnaireResponseForm/widgets/MDEditorControl/MarkDownEditor/index.tsx
@@ -16,6 +16,7 @@ import { useEffect, useRef } from 'react';
 import { useTheme } from 'styled-components';
 
 import '@mdxeditor/editor/style.css';
+import { S } from './styles';
 
 interface MarkDownEditorProps {
     markdownString: string;
@@ -36,13 +37,7 @@ export function MarkDownEditor({ markdownString = '', readOnly = false, onChange
 
     // TODO Add a button to add link and make a custom modal to enter the link
     // https://mdxeditor.dev/editor/api/functions/linkDialogPlugin
-    const plugins = [
-        headingsPlugin(),
-        listsPlugin(),
-        quotePlugin(),
-        linkPlugin(),
-        markdownShortcutPlugin(),
-    ];
+    const plugins = [headingsPlugin(), listsPlugin(), quotePlugin(), linkPlugin(), markdownShortcutPlugin()];
 
     if (!readOnly) {
         plugins.push(
@@ -64,15 +59,17 @@ export function MarkDownEditor({ markdownString = '', readOnly = false, onChange
     }
 
     return (
-        <MDXEditor
-            className={theme.mode === 'dark' ? 'dark-theme' : ''}
-            ref={mdxEditorRef}
-            readOnly={readOnly}
-            markdown={markdownString}
-            onChange={onChange}
-            contentEditableClassName="MarkDownEditorContent"
-            plugins={plugins}
-        />
+        <S.MDXEditorWrapper>
+            <MDXEditor
+                className={theme.mode === 'dark' ? 'dark-theme' : ''}
+                ref={mdxEditorRef}
+                readOnly={readOnly}
+                markdown={markdownString}
+                onChange={onChange}
+                contentEditableClassName="MarkDownEditorContent"
+                plugins={plugins}
+            />
+        </S.MDXEditorWrapper>
     );
 }
 
diff --git a/src/components/BaseQuestionnaireResponseForm/widgets/MDEditorControl/MarkDownEditor/styles.ts b/src/components/BaseQuestionnaireResponseForm/widgets/MDEditorControl/MarkDownEditor/styles.ts
new file mode 100644
index 00000000..6a876d51
--- /dev/null
+++ b/src/components/BaseQuestionnaireResponseForm/widgets/MDEditorControl/MarkDownEditor/styles.ts
@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const S = {
+    MDXEditorWrapper: styled.div`
+        .mdxeditor-toolbar {
+            z-index: 0;
+        }
+    `,
+};