avatar
UI
Components
Changelog
LobeHub UI
Antd Components
Lucide Icons
CSSinJS
Ctrl
K
Chat
ChatInputArea
ChatItem
EditableMessage
Data Display
Card
ChatMarkdown
CollapseGroup
Descriptions
Highlighter
JsonViewer
LogViewer
ProCard
RichTextEditor
Status
Table
Tree
Data Entry
CodeEditor
Form
Mentions
MonacoEditor
SelectCard
SliderInput
Feedback
Alert
DragPanel
Drawer
Modal
Notification
General
Breadcrumb
Typography
WaveformIcon
Layout
Divider
Page
Navigation
ButtonGroup
Dropdown
Theme
ConfigProvider
Logo
TTS
useSpeechSynthes
Utils
FormHelper

CodeEditor

import { CodeEditor } from '@yuntijs/ui';
NPM
UNPKG
BundlePhobia
PackagePhobia
Anvaka Graph
Source
Edit
Previous
Tree
Next
Form

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-2026
Made with ☁️ by YuntiJS
LobeHub

Default

APIs

NameDescriptionTypeDefault
children--ReactNode--
style--{}--
onChange--(event:E)=>void--
prefixCls--string--
className--string--
horizontal--booleanfalse
prefix--string--
onSelect--(event:E)=>void--
classNames--{highlight?:string;textarea?:string}--
autoFocus--boolean--
defaultValue--string|number|unknown--
direction--"vertical"|"vertical-reverse"|"horizontal"|"horizontal-reverse""horizontal"
value--string(required)
onFocus--(event:E)=>void--
onBlur--(event:E)=>void--
id--string--
disabled--boolean--
variant--"block"|"ghost"|"pure"--
styles--{highlight?:object;textarea?:object}--
form--string--
color--string--
defaultChecked--boolean--
suppressContentEditableWarning--boolean--
suppressHydrationWarning--boolean--
accessKey--string--
autoCapitalize--off|none|on|sentences|words|characters|string--
contentEditable--Booleanish|inherit|plaintext-only--
contextMenu--string--
dir--string--
draggable--true|false|boolean--
enterKeyHint--"enter"|"done"|"go"|"next"|"previous"|"search"|"send"--
hidden--boolean--
lang--string--
nonce--string--
slot--string--
spellCheck--true|false|boolean--
tabIndex--number--
title--string--
translate--"yes"|"no"--
radioGroup--string--
role--string|none|search|alert|alertdialog|application|article|banner|button|cell|checkbox|columnheader|combobox|complementary|contentinfo|definition|dialog|directory|document|feed|figure|form|grid|gridcell|group|heading|img|link|list|listbox|listitem|log|main|marquee|math|menu|menubar|menuitem|menuitemcheckbox|menuitemradio|navigation|note|option|presentation|progressbar|radio|radiogroup|region|row|rowgroup|rowheader|scrollbar|searchbox|separator|slider|spinbutton|status|switch|tab|table|tablist|tabpanel|term|textbox|timer|toolbar|tooltip|tree|treegrid|treeitem--
about--string--
content--string--
datatype--string--
inlist--any--
property--string--
rel--string--
resource--string--
rev--string--
typeof--string--
vocab--string--
autoCorrect--string--
autoSave--string--
itemProp--string--
itemScope--boolean--
itemType--string--
itemID--string--
itemRef--string--
results--number--
security--string--
unselectable--"off"|"on"--
popover--""|"auto"|"manual"--
popoverTargetAction--"toggle"|"show"|"hide"--
popoverTarget--string--
inert--boolean--
inputModeHints at the type of data that might be entered by the user while editing the element or its contents"none"|"search"|"text"|"tel"|"url"|"email"|"numeric"|"decimal"--
isSpecify that a standard HTML element should behave like a defined custom built-in elementstring--
exportparts--string--
part--string--
dangerouslySetInnerHTML--{__html:string|TrustedHTML}--
onCopy--(event:E)=>void--
onCopyCapture--(event:E)=>void--
onCut--(event:E)=>void--
onCutCapture--(event:E)=>void--
onPaste--(event:E)=>void--
onPasteCapture--(event:E)=>void--
onCompositionEnd--(event:E)=>void--
onCompositionEndCapture--(event:E)=>void--
onCompositionStart--(event:E)=>void--
onCompositionStartCapture--(event:E)=>void--
onCompositionUpdate--(event:E)=>void--
onCompositionUpdateCapture--(event:E)=>void--
onFocusCapture--(event:E)=>void--
onBlurCapture--(event:E)=>void--
onChangeCapture--(event:E)=>void--
onBeforeInput--(event:E)=>void--
onBeforeInputCapture--(event:E)=>void--
onInput--(event:E)=>void--
onInputCapture--(event:E)=>void--
onReset--(event:E)=>void--
onResetCapture--(event:E)=>void--
onSubmit--(event:E)=>void--
onSubmitCapture--(event:E)=>void--
onInvalid--(event:E)=>void--
onInvalidCapture--(event:E)=>void--
onLoad--(event:E)=>void--
onLoadCapture--(event:E)=>void--
onError--(event:E)=>void--
onErrorCapture--(event:E)=>void--
onKeyDown--(event:E)=>void--
onKeyDownCapture--(event:E)=>void--
onKeyPress--(event:E)=>void--
onKeyPressCapture--(event:E)=>void--
onKeyUp--(event:E)=>void--
onKeyUpCapture--(event:E)=>void--
onAbort--(event:E)=>void--
onAbortCapture--(event:E)=>void--
onCanPlay--(event:E)=>void--
onCanPlayCapture--(event:E)=>void--
onCanPlayThrough--(event:E)=>void--
onCanPlayThroughCapture--(event:E)=>void--
onDurationChange--(event:E)=>void--
onDurationChangeCapture--(event:E)=>void--
onEmptied--(event:E)=>void--
onEmptiedCapture--(event:E)=>void--
onEncrypted--(event:E)=>void--
onEncryptedCapture--(event:E)=>void--
onEnded--(event:E)=>void--
onEndedCapture--(event:E)=>void--
onLoadedData--(event:E)=>void--
onLoadedDataCapture--(event:E)=>void--
onLoadedMetadata--(event:E)=>void--
onLoadedMetadataCapture--(event:E)=>void--
onLoadStart--(event:E)=>void--
onLoadStartCapture--(event:E)=>void--
onPause--(event:E)=>void--
onPauseCapture--(event:E)=>void--
onPlay--(event:E)=>void--
onPlayCapture--(event:E)=>void--
onPlaying--(event:E)=>void--
onPlayingCapture--(event:E)=>void--
onProgress--(event:E)=>void--
onProgressCapture--(event:E)=>void--
onRateChange--(event:E)=>void--
onRateChangeCapture--(event:E)=>void--
onSeeked--(event:E)=>void--
onSeekedCapture--(event:E)=>void--
onSeeking--(event:E)=>void--
onSeekingCapture--(event:E)=>void--
onStalled--(event:E)=>void--
onStalledCapture--(event:E)=>void--
onSuspend--(event:E)=>void--
onSuspendCapture--(event:E)=>void--
onTimeUpdate--(event:E)=>void--
onTimeUpdateCapture--(event:E)=>void--
onVolumeChange--(event:E)=>void--
onVolumeChangeCapture--(event:E)=>void--
onWaiting--(event:E)=>void--
onWaitingCapture--(event:E)=>void--
onAuxClick--(event:E)=>void--
onAuxClickCapture--(event:E)=>void--
onClick--(event:E)=>void--
onClickCapture--(event:E)=>void--
onContextMenu--(event:E)=>void--
onContextMenuCapture--(event:E)=>void--
onDoubleClick--(event:E)=>void--
onDoubleClickCapture--(event:E)=>void--
onDrag--(event:E)=>void--
onDragCapture--(event:E)=>void--
onDragEnd--(event:E)=>void--
onDragEndCapture--(event:E)=>void--
onDragEnter--(event:E)=>void--
onDragEnterCapture--(event:E)=>void--
onDragExit--(event:E)=>void--
onDragExitCapture--(event:E)=>void--
onDragLeave--(event:E)=>void--
onDragLeaveCapture--(event:E)=>void--
onDragOver--(event:E)=>void--
onDragOverCapture--(event:E)=>void--
onDragStart--(event:E)=>void--
onDragStartCapture--(event:E)=>void--
onDrop--(event:E)=>void--
onDropCapture--(event:E)=>void--
onMouseDown--(event:E)=>void--
onMouseDownCapture--(event:E)=>void--
onMouseEnter--(event:E)=>void--
onMouseLeave--(event:E)=>void--
onMouseMove--(event:E)=>void--
onMouseMoveCapture--(event:E)=>void--
onMouseOut--(event:E)=>void--
onMouseOutCapture--(event:E)=>void--
onMouseOver--(event:E)=>void--
onMouseOverCapture--(event:E)=>void--
onMouseUp--(event:E)=>void--
onMouseUpCapture--(event:E)=>void--
onSelectCapture--(event:E)=>void--
onTouchCancel--(event:E)=>void--
onTouchCancelCapture--(event:E)=>void--
onTouchEnd--(event:E)=>void--
onTouchEndCapture--(event:E)=>void--
onTouchMove--(event:E)=>void--
onTouchMoveCapture--(event:E)=>void--
onTouchStart--(event:E)=>void--
onTouchStartCapture--(event:E)=>void--
onPointerDown--(event:E)=>void--
onPointerDownCapture--(event:E)=>void--
onPointerMove--(event:E)=>void--
onPointerMoveCapture--(event:E)=>void--
onPointerUp--(event:E)=>void--
onPointerUpCapture--(event:E)=>void--
onPointerCancel--(event:E)=>void--
onPointerCancelCapture--(event:E)=>void--
onPointerEnter--(event:E)=>void--
onPointerLeave--(event:E)=>void--
onPointerOver--(event:E)=>void--
onPointerOverCapture--(event:E)=>void--
onPointerOut--(event:E)=>void--
onPointerOutCapture--(event:E)=>void--
onGotPointerCapture--(event:E)=>void--
onGotPointerCaptureCapture--(event:E)=>void--
onLostPointerCapture--(event:E)=>void--
onLostPointerCaptureCapture--(event:E)=>void--
onScroll--(event:E)=>void--
onScrollCapture--(event:E)=>void--
onScrollEnd--(event:E)=>void--
onScrollEndCapture--(event:E)=>void--
onWheel--(event:E)=>void--
onWheelCapture--(event:E)=>void--
onAnimationStart--(event:E)=>void--
onAnimationStartCapture--(event:E)=>void--
onAnimationEnd--(event:E)=>void--
onAnimationEndCapture--(event:E)=>void--
onAnimationIteration--(event:E)=>void--
onAnimationIterationCapture--(event:E)=>void--
onToggle--(event:E)=>void--
onBeforeToggle--(event:E)=>void--
onTransitionCancel--(event:E)=>void--
onTransitionCancelCapture--(event:E)=>void--
onTransitionEnd--(event:E)=>void--
onTransitionEndCapture--(event:E)=>void--
onTransitionRun--(event:E)=>void--
onTransitionRunCapture--(event:E)=>void--
onTransitionStart--(event:E)=>void--
onTransitionStartCapture--(event:E)=>void--
visible--booleantrue
align--"start"|"end"|"center"|"baseline"|"stretch""stretch"
placeholder--string--
height--number|string"auto"
maxLength--number--
minLength--number--
readOnly--boolean--
required--boolean--
width--number|string"auto"
flex--number|string"0 1 auto"
gap--CommonSpaceNumber|number|string0
as--symbol|object|style|small|circle|search|article|button|dialog|figure|form|img|link|main|menu|menuitem|option|switch|table|text|time|slot|title|header|body|pattern|image|unknown|FunctionComponent|input|mask|footer|center|label|line|canvas|svg|cite|data|span|summary|track|select|picture|clipPath|filter|path|a|abbr|address|area|aside|audio|b|base|bdi|bdo|big|blockquote|br|caption|code|col|colgroup|datalist|dd|del|details|dfn|div|dl|dt|em|embed|fieldset|figcaption|h1|h2|h3|h4|h5|h6|head|hgroup|hr|html|i|iframe|ins|kbd|keygen|legend|li|map|mark|meta|meter|nav|noindex|noscript|ol|optgroup|output|p|param|pre|progress|q|rp|rt|ruby|s|samp|script|section|source|strong|sub|sup|template|tbody|td|textarea|tfoot|th|thead|tr|u|ul|var|video|wbr|webview|animate|animateMotion|animateTransform|defs|desc|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|foreignObject|g|linearGradient|marker|metadata|mpath|polygon|polyline|radialGradient|rect|set|stop|textPath|tspan|use|view"div"
wrap--any--
distribution--"start"|"end"|"center"|"between"|"around"--
internalClassName--string--
justify--"start"|"end"|"center"|"between"|"around"--
padding--string|number|CommonSpaceNumber0
paddingInline--string|number--
paddingBlock--string|number--
fontSize--number|string--
language--string(required)
tabSize--number--
ignoreTabKey--boolean--
insertSpaces--boolean--
onValueChange--(value:string)=>void(required)
textareaId--string--
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).|bivarianceHack|RefObject--
key--Key|--
# 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**

---

![](https://gw.alipayobjects.com/zos/kitchen/sLO%24gbrQtp/lobe-chat.webp)

![](https://gw.alipayobjects.com/zos/kitchen/8Ab%24hLJ5ur/cover.webp)

<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
1. McHale
1. Parish
    1. Bird
    1. McHale
        1. Parish

---

- Red
- Green
- Blue
    - Red
    - Green
        - Blue

---

This is [an example](http://example.com/ "Title") inline link.

<http://example.com/>


| title | title | title |
| --- | --- | --- |
| content | content | content |


```bash
$ pnpm install
```


```javascript
import { renderHook } from '@testing-library/react-hooks';
import { act } from 'react-dom/test-utils';
import { useDropNodeOnCanvas } from './useDropNodeOnCanvas';
```

---

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

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

我是一个独立公式:
$$
\sum_{i=1}^{n} x_i = x_1 + x_2 + \ldots + x_n
$$

我是一个带有分式的公式:
$$
\frac{{n!}}{{k!(n-k)!}} = \binom{n}{k}
$$

我是一个带有上下标的公式:
$$
x^{2} + y^{2} = r^{2}
$$

我是一个带有积分符号的公式:
$$
\int_{a}^{b} f(x) \, dx
$$

---

我是一个嵌套测试:
```
$1
```