Py.Cafe

amward/

dash-mantine-rich-text-editor

Rich Text Editor with Custom Table Controls using Dash Mantine Components

DocsPricing
  • assets/
  • app.py
  • requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58


import dash_mantine_components as dmc
from dash import Dash
from dash_iconify import DashIconify

app=Dash()

content = """<h2 style="text-align: center;">RichTextEditor Custom Controls Demo</h2>"""

toolbar = {
    "sticky": True,
    "controlsGroups": [
        [

            {
                "CustomControl": {
                    "ariaLabel": "Insert Table",
                    "title": "Insert Table",
                    "children": [DashIconify(icon="mdi:table-plus", width=20, height=20)],
                    "function": "insertTable",
                },
            },
            {
                "CustomControl": {
                    "ariaLabel": "Add Column Before",
                    "title": "Add Column Before",
                    "children": [DashIconify(icon="mdi:table-column-plus-before", width=20, height=20)],
                    "function": "addColumnBefore",
                },
            },
            {
                "CustomControl": {
                    "ariaLabel": "Delete Column",
                    "title": "Delete Column",
                    "children": [DashIconify(icon="mdi:table-column-remove", width=20, height=20)],
                    "function": "deleteColumn",
                },
            },
        ],
        [
            "Bold",
            "Italic",
            "Underline",
        ],
    ],
}

app.layout = dmc.MantineProvider(
    dmc.RichTextEditor(
        html=content,
        toolbar=toolbar
    )
)

if __name__ == "__main__":
    app.run(debug=True)