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,
)
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
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
Great that you got the table working. 
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
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;
}
}