Dash MdxEditor Component

Dash Python
,
1

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, 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
Screenshot 2024-06-26 at 11.36.40959×544 20.3 KB

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.

3 Likes
2

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

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:

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:

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:

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.

2 Likes