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
beda-software · Jan 7, 2025 · daa9fdb · daa9fdb
1 parent c668811
commit daa9fdb
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/...components/BaseQuestionnaireResponseForm/widgets/MDEditorControl/MarkDownEditor/index.tsx b/...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/...components/BaseQuestionnaireResponseForm/widgets/MDEditorControl/MarkDownEditor/styles.ts b/...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;
+        }
+    `,
+};