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 (
-
+
+
+
);
}
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;
+ }
+ `,
+};