Trouble Positioning Custom Toolbar at Bottom of MDXEditor in React

[YannickPerret]

Hi everyone,

I'm working on a React project where I'm using MDXEditor for markdown editing. I've created a custom toolbar component, but I'm having trouble positioning it at the bottom of the editor. I want the toolbar to be fixed at the bottom of the MDXEditor component. Here's my JSX and SCSS code:

import React, { useState } from 'react';
import editorStyle from './Editor.module.scss';
import {
  MDXEditor, toolbarPlugin, /* other imports */
} from '@mdxeditor/editor';

// Custom Toolbar Component
const CustomToolbar = () => {
  return (
    <div className={editorStyle.toolbar}>
      <button className={editorStyle.toolbar__button} type="button">B</button>
      <button className={editorStyle.toolbar__button} type="button">I</button>
      {/* other buttons */}
    </div>
  );
}

const MarkdownEditor = () => {
  const [markdown, setMarkdown] = useState(/* initial state */);

  return (
    <MDXEditor
      className={editorStyle.editor}
      contentEditableClassName="customEditor"      
      markdown={markdown}
      plugins={[
        toolbarPlugin({ toolbarContents: CustomToolbar }),
        // other plugins
      ]}
      onChange={/* handler function */}
    />
  );
};

export default MarkdownEditor;

SCSS:

.editor {
    position: relative !important;
    top: initial !important;
}


.customEditor {
    display: flex;
    flex-direction: column;
    flex: 1;
    border: 1px solid #ccc;
    position: relative; // Important pour le positionnement absolu de la barre d'outils
    height: 100vh; // Assurez-vous que cette hauteur est appropriée pour votre mise en page
}

.toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.5rem;
    border-top: 1px solid #ccc;
    position: absolute;
    bottom: 10%; // Cela devrait positionner la barre en bas
    width: 100%; // Assure la largeur complète
    z-index: 10; // Ajustez si nécessaire pour s'assurer qu'elle est au-dessus des autres éléments

    &__button {
        background-color: #e81919;
        color: yellowgreen;
    }
}

The toolbar appears at the top of the editor and is only partially visible. I've tried adjusting the styles but can't seem to get it to the bottom. Any suggestions or insights on what I might be doing wrong?

Thanks in advance for your help!

[YannickPerret]

[petyosi]

Did you check this? #248