# Dash MdxEditor Component

**URL:** <https://community.plotly.com/t/dash-mdxeditor-component/85392>\
**Category:** Dash Python\
**Tags:** show-and-tell, community-components\
**Created:** [June 26, 2024, 9:47am UTC](https://community.plotly.com/t/dash-mdxeditor-component/85392 "2024-06-26T09:47:41Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![jgomezgadea](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jgomezgadea/32/27225_2.png) [@jgomezgadea](https://community.plotly.com/u/jgomezgadea)\
**Post date:** [June 26, 2024, 9:47am UTC](https://community.plotly.com/t/dash-mdxeditor-component/85392/1 "2024-06-26T09:47:41Z")

</div>

Hi community,

I have been looking for a **Rich Text Markdown editor** compatible with Dash, and I haven’t found anything that meets my requirements. I have decided to create my own component, so I ported [MdxEditor](https://mdxeditor.dev/), which allows to create a panel with a markdown editor.

Note that this is the first time I published anything to the open-source community. The port I made is very simple and does not include all the features yet. However in the upcoming weeks I will update the project and add as features as possible to this Dash wrapper.

In the meantime you can download it with `pip install dash-mdxeditor` and run the demo:

 ![Screenshot 2024-06-26 at 11.36.40](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/9/7/978bd1b7ac5a2159899c50d6f6829d07e6a74d6d.png)

```auto
import dash_mdxeditor as dme
from dash import Dash, callback, html, Input

app = Dash( __name__ )

default_text = "# Hello World! \n## This is a subtitle\nThis is a **normal** text\n- Item 1\n- Item 2\n"

app.layout = html.Div([
    dme.MdxEditor(id='mdx-editor', default_text=default_text),
])

@callback(Input('mdx-editor', 'text'))
def display_output(text: str):
    print(text)

if __name__ == ' __main__':
    app.run_server(debug=True)

```

Note that you will need Dash \>= 2.17.0 to set the experimental env var REACT\_VERSION to 18.2.0, required for the MdxEditor to work.

If you want to fork the component and improve the functionality, please check the [GitHub repo](https://github.com/Spend-Matters-LLC/dash-mdxeditor).

---

<div class="post-metadata">

**Author:** ![PipInstallPython](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/pipinstallpython/32/34539_2.png) [@PipInstallPython](https://community.plotly.com/u/PipInstallPython)\
**Post date:** [June 26, 2024, 4:59pm UTC](https://community.plotly.com/t/dash-mdxeditor-component/85392/2 "2024-06-26T16:59:33Z")

</div>

Awesome project! At the moment their are 3 known rich text editor for dash at this moment. `pip install dash-quill`, `pip install dash-summernote` and now `pip install dash-mdxeditor`.

I’m the creator behind the dash summernote: [Dash](https://pip-install-python.com/pip/dash_summernote)

Honestly summernote and mdxeditor are very close in functionality. Differences I could spot between the two was the image and video field I have setup in summernote. Working though providing links, I haven’t been able to figure out an alternative solution for the uploading image from the users computer. Curious to understand your thoughts as I noticed on the base library MdxEditor their was an image field yet when you setup your specific package in dash it isn’t provided. Have you touched on the image field for the rich text editor?

Outside of that another small difference is the ability to change text color and highlight text from summernote toolbar.

On the contrary, the codesandbox and overall dropdown functionality of MdxEditor is superior in my opinion. Really like the admonition and dif mode and overal header of the editor.

Great project, really appreciate seeing stuff like this. For those having trouble setting it up, just to add some context to what @jgomezgadea has setup, make sure you have the latest dash installed then at the top of the app.py before the imports you can setup the REACT\_VERSION with adding:

```auto
import os

# Set the environment variable
os.environ['REACT_VERSION'] = '18.2.0'

```

Lastly, a constructive improvement I can mention is to make the props selectable for the component rather than just rendering the full component. Should be fairly easy to setup default props and prop type for `src/lib/components/MdxEditor.tsx` for context this is my equivalent with summernote:

```auto
import React, { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import ReactSummernote from 'react-summernote';
import 'react-summernote/dist/react-summernote.css';
import 'bootstrap/js/dist/modal';
import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/tooltip';
import 'bootstrap/dist/css/bootstrap.css';

const DashSummernote = (props) => {
    const {id, setProps, value, toolbar, height} = props;

    return (
        <ReactSummernote
            id={id}
            value={value}
            options={{
                height: height,
                dialogsInBody: true,
                toolbar: toolbar
            }}
            onChange={(content) => {
                setProps({ value: content });
            }}
        />
    );
}

DashSummernote.defaultProps = {};

DashSummernote.propTypes = {
    id: PropTypes.string,
    value: PropTypes.string,
    setProps: PropTypes.func,
    toolbar: PropTypes.array,
    height: PropTypes.number
};

export default DashSummernote;

```

which allows me to change the props from the component from the python file via:

```auto
dash_summernote.DashSummernote(
        id='summernote',
        value='my-value',
        toolbar=[
                    ["style", ["style"]],
                    ["font", ["bold", "underline", "clear"]],
                    ["fontname", ["fontname"]],
                    ["para", ["ul", "ol", "paragraph"]],
                    ["table", ["table"]],
                    ["insert", ["link", "picture", "video"]],
                    ["view", ["fullscreen", "codeview"]]
                ],
        height=300
    )

```

If you did the same you could allow users to change the toolbar options dynamically.

OH! And welcome to Plotly! Saw this is your first post, what an impressive introduction.