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