LobeChatLobeHub
UI
Components
Chat
Mobile
Awesome
Brand
Mdx
Color
Changelog
Ctrl K
Data Display
ChatItem
ChatList
TokenTag
Data Entry
ChatInputArea
EditableMessage
EditableMessageList
MessageInput
Feedback
MessageModal
Layout
ChatHeader
Navigation
BackBottom

EditableMessage

The EditableMessage component is used to display a message that can be edited by the user. It consists of a Markdown component and an optional modal for editing the message. When the user clicks on the message, it enters editing mode and displays an input field for editing the message.

import { EditableMessage } from '@lobehub/ui/chat';
NPM
UNPKG
BundlePhobia
PackagePhobia
Anvaka Graph
Source
Edit
Previous
ChatInputArea
Next
EditableMessageList

Resources

Lobe UI-AIGC Components
Lobe Icon-AI / LLM Icon Collection
Lobe Charts-Modern Charts
Lobe TTS-TTS / STT Library

Community

Report Bug
Request Feature

Help

GitHub
Changelog

More Products

🤯 Lobe Chat-AI / LLM Chat Framework
🧸 Lobe Vidol-Virtual Idols for EveryOne
🅰️ Lobe Theme-Stable Diffusion Extension
🌐 Lobe i18n-AI i18next CLI
Copyright © 2022-2025
Made with 🤯 by LobeHub
LobeHub

Default

APIs

NameDescriptionTypeDefault
classNames--{input?:string;markdown?:string;textarea?:string}--
editButtonSize--any--
editing--booleanfalse
fontSize--number--
fullFeaturedCodeBlock--boolean--
height--any--
inputType--any--
markdownProps--{}--
model--{extra?:any;footer?:any}--
onChange--(value:string)=>void--
onEditingChange--(editing:boolean)=>void--
onOpenChange--(open:boolean)=>void--
openModal--booleanfalse
placeholder--string--
showEditWhenEmpty--booleanfalse
styles--{input?:object;markdown?:object}--
text--any--
value--string(required)

This is an H1

This is an H2

This is an H3

This is an H4

This is an H5

The point of reference-style links is not that they’re easier to write. The point is that with reference-style links, your document source is vastly more readable. Compare the above examples: using reference-style links, the paragraph itself is only 81 characters long; with inline-style links, it’s 176 characters; and as raw HTML, it’s 234 characters. In the raw HTML, there’s more markup than there is text.


This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.


an example | an example | an example


<video poster="https://gw.alipayobjects.com/zos/kitchen/sLO%24gbrQtp/lobe-chat.webp" src="https://github.com/lobehub/lobe-chat/assets/28616219/f29475a3-f346-4196-a435-41a6373ab9e2"/>


  1. Bird
  2. McHale
  3. Parish
    1. Bird
    2. McHale
      1. Parish

  • Red
  • Green
  • Blue
    • Red
    • Green
      • Blue

This is an example inline link.

http://example.com/

titletitletitle
contentcontentcontent
$ pnpm install
javascript
import { renderHook } from '@testing-library/react-hooks';
import { act } from 'react-dom/test-utils';
import { useDropNodeOnCanvas } from './useDropNodeOnCanvas';
mermaid

以下是一段Markdown格式的LaTeX数学公式:

我是一个行内公式:E=mc2E=mc^2E=mc2

我是一个独立的傅里叶公式:

f(x)=a0+∑n=1∞(ancos⁡(nx)+bnsin⁡(nx))f(x) = a_0 + \sum_{n=1}^{\infty} \left( a_n \cos(nx) + b_n \sin(nx) \right)f(x)=a0​+n=1∑∞​(an​cos(nx)+bn​sin(nx))

其中,带有积分符号的项:

a0=12π∫−ππf(x) dxa_0 = \frac{1}{2\pi} \int_{-\pi}^{\pi} f(x) \, dxa0​=2π1​∫−ππ​f(x)dx an=1π∫−ππf(x)cos⁡(nx) dxforn≥1a_n = \frac{1}{\pi} \int_{-\pi}^{\pi} f(x) \cos(nx) \, dx \quad \text{for} \quad n \geq 1an​=π1​∫−ππ​f(x)cos(nx)dxforn≥1 bn=1π∫−ππf(x)sin⁡(nx) dxforn≥1b_n = \frac{1}{\pi} \int_{-\pi}^{\pi} f(x) \sin(nx) \, dx \quad \text{for} \quad n \geq 1bn​=π1​∫−ππ​f(x)sin(nx)dxforn≥1

我是一个带有分式、测试长度超长的泰勒公式:

f(x)=f(a)+f′(a)(x−a)+f′′(a)2!(x−a)2+f′′′(a)3!(x−a)3+⋯+f(n)(a)n!(x−a)n+Rn(x)\begin{equation} f(x) = f(a) + f'(a)(x - a) + \frac{f''(a)}{2!}(x - a)^2 + \frac{f'''(a)}{3!}(x - a)^3 + \cdots + \frac{f^{(n)}(a)}{n!}(x - a)^n + R_n(x) \end{equation}f(x)=f(a)+f′(a)(x−a)+2!f′′(a)​(x−a)2+3!f′′′(a)​(x−a)3+⋯+n!f(n)(a)​(x−a)n+Rn​(x)​​

我是一个带有上下标的公式:

x2+y2=r2x^{2} + y^{2} = r^{2}x2+y2=r2

我是一个嵌套测试:

$1