Resizing Images and Tables in dmc.RichTextEditor

Dash Python
1

Hi everyone,

I am currently using the dmc.RichTextEditor component in my project, and it is rendering correctly on my page. I can paste images and tables from the clipboard into the editor, but I am unable to resize them. I am wondering if there are any extensions or configurations available for dmc.RichTextEditor that would allow me to enable resizing functionality for images and tables. Since RichTextEditor is built on top of Tiptap, I believe it might be possible to reuse some of its functionality. If anyone has experience with this or knows of a solution, I would greatly appreciate your input.

Ideally, I want to implement something like that for images:
Resize images on editor · Issue #333 · ueberdosis/tiptap

And something like that for tables:
Tables example | Tiptap Editor Docs

For the context, this is the code I am using right now:

dmc.RichTextEditor(
            id=self.id,
            extensions=[
                "StarterKit",
                {"Image": {"inline": "true", "allowBase64": "true"}},
                "FileHandler",
            ],
            html="Add your input here",
            toolbar=toolbar,
)
2

Hi @akalinich

It looks like the table extension should be available. You can try following these instructions in the DMC docs in the customizing extensions section:

Resizing the image looks a lot tricker since it’s not a TipTap extension. But please feel free to open a feature request in the DMC GitHub

3

Thank you @AnnMarieW for this information. I was able to achieve the table resizing behavior by setting the resizable flag to true.

For Images - I have opened the feature request:
[Feature Request] Add ImageResize tiptap extension for RichTextEditor · Issue #607 · snehilvj/dash-mantine-components

4

Great that you got the table working. :tada:
If you happen to have a minimal example, it would be great if you posted it here since there isn’t an example in the docs.

Thanks for the feature request

5

Sure, below is the changes that worked for me (we use a separate class to generate the layout) :

    def editor_layout(self):
        return dmc.RichTextEditor(
            id=self.id,
            extensions=[
                "StarterKit",
                {"Image": {"inline": "true", "allowBase64": "true"}},
                "FileHandler",
                "Underline",
                "Link",
                "Superscript",
                "Subscript",
                "Highlight",
                "Color",
                "TextStyle",
                {"Table": {"resizable": "true"}},
                "TableCell",
                "TableHeader",
                "TableRow",
                {"Placeholder": {"placeholder": self.placeholder}},
            ],
            html=self.content,
            toolbar=toolbar,
        )

And I also updated CSS to show the resize cursor:

.mantine-RichTextEditor-content {  
  .resize-cursor {
      cursor: col-resize;
    }
}