feat: support display image in document editor (#157)

* feat: support display image in document editor

* Create quick-boats-relax.md

.changeset/quick-boats-relax.md

@@ -0,0 +1,5 @@
+---
+'@llamaindex/chat-ui': patch
+---
+
+feat: support display image in document editor

apps/web/app/examples/document-editor/data.ts

@@ -34,6 +34,10 @@ If you need a few ideas, here's what you can try:
 5. Test the diff feature to see how the markdown has changed
 6. Add a frontmatter block through the toolbar button
 
+## A sample image block
+
+![Cute cat](https://placecats.com/300/200)
+
 ## A table
 
 Play with the table below - add rows, columns, change column alignment. When editing,

packages/chat-ui/src/widgets/document-editor.tsx

@@ -12,6 +12,7 @@ import {
   toolbarPlugin,
   thematicBreakPlugin,
   quotePlugin,
+  imagePlugin,
 } from '@mdxeditor/editor'
 
 export function DocumentEditor({
@@ -34,6 +35,7 @@ export function DocumentEditor({
     markdownShortcutPlugin(),
     thematicBreakPlugin(),
     quotePlugin(),
+    imagePlugin(),
   ]
 
   if (showToolbar) {