+
+ }
+ trigger={
+
+ }
+ key="emoji-toolbar"
+ >
+ {
+ setMvisible(false);
+ }}
+ >
+ Content, Content
+
+
+ );
+};
+
+export default () => {
+ const [value, setValue] = useState('');
+
+ return (
+ ]}
+ onChange={setValue}
+ />
+ );
+};
+```
+
+---
+
+## ✍️ 编辑此页面
+
+[doc-zh-CN](https://github.com/imzbf/md-editor-rt/blob/dev-docs/public/doc-zh-CN.md)
diff --git a/docs/grammar-en-US.md b/docs/grammar-en-US.md
new file mode 100644
index 00000000..6beafa86
--- /dev/null
+++ b/docs/grammar-en-US.md
@@ -0,0 +1,294 @@
+## 🐶 Heading
+
+```markdown
+## Heading
+```
+
+---
+
+## 🐱 Bold
+
+**I have a dream that one day this nation will rise up.**
+
+```markdown
+**I have a dream that one day this nation will rise up.**
+```
+
+---
+
+## 🐭 Italic
+
+_It is a dream deeply rooted in the American dream._
+
+```markdown
+_It is a dream deeply rooted in the American dream._
+```
+
+---
+
+## 🐹 Strikethrough
+
+~~It is a dream deeply rooted in the American dream.~~
+
+```markdown
+~~It is a dream deeply rooted in the American dream.~~
+```
+
+---
+
+## 🐻 Link
+
+[md-editor-rt](https://imzbf.github.io/md-editor-rt/)
+
+```markdown
+[md-editor-rt](https://imzbf.github.io/md-editor-rt/)
+```
+
+---
+
+## 🐼 Picture
+
+
+
+```markdown
+
+```
+
+---
+
+## 🙉 Underline
+
+So even though we face the difficulties of today and tomorrow, I still have a dream.
+
+```markdown
+So even though we face the difficulties of today and tomorrow, I still have a dream.
+```
+
+---
+
+## 🙊 Superscript
+
+I have a dream that one day this nation will rise up.[1]
+
+```markdown
+I have a dream that one day this nation will rise up.[1]
+```
+
+---
+
+## 🐒 Subscript
+
+I have a dream that one day this nation will rise up.[2]
+
+```markdown
+I have a dream that one day this nation will rise up.[2]
+```
+
+---
+
+## 🐰 Inline Code
+
+`md-editor-rt`
+
+```markdown
+`md-editor-rt`
+```
+
+---
+
+## 🦊 Block Code
+
+````markdown
+```js
+import MdEditor from 'md-editor-rt';
+import 'md-editor-rt/lib/style.css';
+```
+````
+
+### 🗄 Combination
+
+```shell [id:yarn]
+yarn add md-editor-rt
+```
+
+```shell [id:npm]
+npm install md-editor-rt
+```
+
+```shell [id:pnpm]
+pnpm install md-editor-rt
+```
+
+````markdown
+```shell [id:yarn]
+yarn add md-editor-rt
+```
+
+```shell [id:npm]
+npm install md-editor-rt
+```
+
+```shell [id:pnpm]
+pnpm install md-editor-rt
+```
+````
+
+---
+
+## 🐻❄️ Quote
+
+> Quote: I Have a Dream
+
+```markdown
+> Quote: I Have a Dream
+```
+
+---
+
+## 🐨 Ordered List
+
+1. So even though we face the difficulties of today and tomorrow, I still have a dream.
+2. It is a dream deeply rooted in the American dream.
+3. I have a dream that one day this nation will rise up.
+
+```markdown
+1. So even though we face the difficulties of today and tomorrow, I still have a dream.
+2. It is a dream deeply rooted in the American dream.
+3. I have a dream that one day this nation will rise up.
+```
+
+---
+
+## 🐯 Unordered List
+
+- So even though we face the difficulties of today and tomorrow, I still have a dream.
+- It is a dream deeply rooted in the American dream.
+- I have a dream that one day this nation will rise up.
+
+```markdown
+- So even though we face the difficulties of today and tomorrow, I still have a dream.
+- It is a dream deeply rooted in the American dream.
+- I have a dream that one day this nation will rise up.
+```
+
+---
+
+## 🦁 Task List
+
+- [ ] Friday
+- [ ] Saturday
+- [x] Sunday
+
+```markdown
+- [ ] Friday
+- [ ] Saturday
+- [x] Sunday
+```
+
+---
+
+## 🐮 Table
+
+| nickname | from |
+| -------- | ---------------- |
+| zhijian | ChongQing, China |
+
+```markdown
+| nickname | from |
+| -------- | ---------------- |
+| zhijian | ChongQing, China |
+```
+
+---
+
+## 🐷 Mathematical Formula
+
+Two modes.
+
+### 🐽 Inline
+
+$x+y^{2x}$
+
+```markdown
+$x+y^{2x}$
+```
+
+---
+
+### 🐸 Block
+
+$$\sqrt[3]{x}$$
+
+```markdown
+$$
+\sqrt[3]{x}
+$$
+
+or
+
+$$\sqrt[3]{x}$$
+```
+
+For more usage: [https://katex.org/docs/supported.html](https://katex.org/docs/supported.html)
+
+---
+
+## 🐵 Diagram
+
+```mermaid
+---
+title: Example Git diagram
+---
+gitGraph
+ commit
+ commit
+ branch develop
+ checkout develop
+ commit
+ commit
+ checkout main
+ merge develop
+ commit
+ commit
+```
+
+````markdown
+```mermaid
+---
+title: Example Git diagram
+---
+gitGraph
+ commit
+ commit
+ branch develop
+ checkout develop
+ commit
+ commit
+ checkout main
+ merge develop
+ commit
+ commit
+```
+````
+
+For more usage: [https://mermaid.js.org/syntax/flowchart.html](https://mermaid.js.org/syntax/flowchart.html)
+
+---
+
+## 🙈 Alert
+
+!!! note Supported Types
+
+note、abstract、info、tip、success、question、warning、failure、danger、bug、example、quote、hint、caution、error、attention
+
+!!!
+
+```markdown
+!!! note Supported Types
+
+note、abstract、info、tip、success、question、warning
+
+failure、danger、bug、example、quote、hint、caution、error、attention
+
+!!!
+```
diff --git a/docs/grammar-zh-CN.md b/docs/grammar-zh-CN.md
new file mode 100644
index 00000000..e57a6a9b
--- /dev/null
+++ b/docs/grammar-zh-CN.md
@@ -0,0 +1,292 @@
+## 🐶 标题
+
+```markdown
+## 标题
+```
+
+---
+
+## 🐱 加粗
+
+**I have a dream that one day this nation will rise up.**
+
+```markdown
+**I have a dream that one day this nation will rise up.**
+```
+
+---
+
+## 🐭 斜体
+
+_It is a dream deeply rooted in the American dream._
+
+```markdown
+_It is a dream deeply rooted in the American dream._
+```
+
+---
+
+## 🐹 删除线
+
+~~It is a dream deeply rooted in the American dream.~~
+
+```markdown
+~~It is a dream deeply rooted in the American dream.~~
+```
+
+---
+
+## 🐻 超链接
+
+[md-editor-rt](https://imzbf.github.io/md-editor-rt/)
+
+```markdown
+[md-editor-rt](https://imzbf.github.io/md-editor-rt/)
+```
+
+---
+
+## 🐼 图片
+
+
+
+```markdown
+
+```
+
+---
+
+## 🙉 下划线
+
+So even though we face the difficulties of today and tomorrow, I still have a dream.
+
+```markdown
+So even though we face the difficulties of today and tomorrow, I still have a dream.
+```
+
+---
+
+## 🙊 上标
+
+I have a dream that one day this nation will rise up.[1]
+
+```markdown
+I have a dream that one day this nation will rise up.[1]
+```
+
+---
+
+## 🐒 下标
+
+I have a dream that one day this nation will rise up.[2]
+
+```markdown
+I have a dream that one day this nation will rise up.[2]
+```
+
+---
+
+## 🐰 行内代码
+
+`md-editor-rt`
+
+```markdown
+`md-editor-rt`
+```
+
+---
+
+## 🦊 块级代码
+
+````markdown
+```js
+import MdEditor from 'md-editor-rt';
+import 'md-editor-rt/lib/style.css';
+```
+````
+
+### 🗄 代码组合
+
+```shell [id:yarn]
+yarn add md-editor-rt
+```
+
+```shell [id:npm]
+npm install md-editor-rt
+```
+
+```shell [id:pnpm]
+pnpm install md-editor-rt
+```
+
+````markdown
+```shell [id:yarn]
+yarn add md-editor-rt
+```
+
+```shell [id:npm]
+npm install md-editor-rt
+```
+
+```shell [id:pnpm]
+pnpm install md-editor-rt
+```
+````
+
+---
+
+## 🐻❄️ 引用
+
+> 引用：《I Have a Dream》
+
+```markdown
+> 引用：《I Have a Dream》
+```
+
+---
+
+## 🐨 有序列表
+
+1. So even though we face the difficulties of today and tomorrow, I still have a dream.
+2. It is a dream deeply rooted in the American dream.
+3. I have a dream that one day this nation will rise up.
+
+```markdown
+1. So even though we face the difficulties of today and tomorrow, I still have a dream.
+2. It is a dream deeply rooted in the American dream.
+3. I have a dream that one day this nation will rise up.
+```
+
+---
+
+## 🐯 无序列表
+
+- So even though we face the difficulties of today and tomorrow, I still have a dream.
+- It is a dream deeply rooted in the American dream.
+- I have a dream that one day this nation will rise up.
+
+```markdown
+- So even though we face the difficulties of today and tomorrow, I still have a dream.
+- It is a dream deeply rooted in the American dream.
+- I have a dream that one day this nation will rise up.
+```
+
+---
+
+## 🦁 任务列表
+
+- [ ] 周五
+- [ ] 周六
+- [x] 周天
+
+```markdown
+- [ ] 周五
+- [ ] 周六
+- [x] 周天
+```
+
+---
+
+## 🐮 表格
+
+| 昵称 | 来自 |
+| ---- | --------- |
+| 之间 | 中国-重庆 |
+
+```markdown
+| 昵称 | 来自 |
+| ---- | --------- |
+| 之间 | 中国-重庆 |
+```
+
+---
+
+## 🐷 数学公式
+
+有两种模式
+
+### 🐽 行内
+
+$x+y^{2x}$
+
+```markdown
+$x+y^{2x}$
+```
+
+### 🐸 块级
+
+$$\sqrt[3]{x}$$
+
+```markdown
+$$
+\sqrt[3]{x}
+$$
+
+或者
+
+$$\sqrt[3]{x}$$
+```
+
+更多公式示例参考：[https://katex.org/docs/supported.html](https://katex.org/docs/supported.html)
+
+---
+
+## 🐵 图表
+
+```mermaid
+---
+title: Example Git diagram
+---
+gitGraph
+ commit
+ commit
+ branch develop
+ checkout develop
+ commit
+ commit
+ checkout main
+ merge develop
+ commit
+ commit
+```
+
+````markdown
+```mermaid
+---
+title: Example Git diagram
+---
+gitGraph
+ commit
+ commit
+ branch develop
+ checkout develop
+ commit
+ commit
+ checkout main
+ merge develop
+ commit
+ commit
+```
+````
+
+更多图形示例参考：[https://mermaid.js.org/syntax/flowchart.html](https://mermaid.js.org/syntax/flowchart.html)
+
+---
+
+## 🙈 提示
+
+!!! note 支持的类型
+
+note、abstract、info、tip、success、question、warning、failure、danger、bug、example、quote、hint、caution、error、attention
+
+!!!
+
+```markdown
+!!! note 支持的类型
+
+note、abstract、info、tip、success、question、warning
+
+failure、danger、bug、example、quote、hint、caution、error、attention
+
+!!!
+```
diff --git a/docs/imgs/20211216165424.png b/docs/imgs/20211216165424.png
new file mode 100644
index 00000000..b3e62abf
Binary files /dev/null and b/docs/imgs/20211216165424.png differ
diff --git a/docs/imgs/dropdown-toolbar.gif b/docs/imgs/dropdown-toolbar.gif
new file mode 100644
index 00000000..64c9b3fb
Binary files /dev/null and b/docs/imgs/dropdown-toolbar.gif differ
diff --git a/docs/imgs/mark_emoji.gif b/docs/imgs/mark_emoji.gif
new file mode 100644
index 00000000..4cd7af63
Binary files /dev/null and b/docs/imgs/mark_emoji.gif differ
diff --git a/docs/imgs/normal-toolbar.gif b/docs/imgs/normal-toolbar.gif
new file mode 100644
index 00000000..6668906a
Binary files /dev/null and b/docs/imgs/normal-toolbar.gif differ
diff --git a/docs/imgs/preview-dark.png b/docs/imgs/preview-dark.png
new file mode 100644
index 00000000..c80a4efa
Binary files /dev/null and b/docs/imgs/preview-dark.png differ
diff --git a/docs/imgs/preview-light.png b/docs/imgs/preview-light.png
new file mode 100644
index 00000000..187ea114
Binary files /dev/null and b/docs/imgs/preview-light.png differ
diff --git a/docs/imgs/preview-previewOnly.png b/docs/imgs/preview-previewOnly.png
new file mode 100644
index 00000000..e850e16d
Binary files /dev/null and b/docs/imgs/preview-previewOnly.png differ
diff --git a/docs/imgs/showToolbarName.jpg b/docs/imgs/showToolbarName.jpg
new file mode 100644
index 00000000..5d96d783
Binary files /dev/null and b/docs/imgs/showToolbarName.jpg differ
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 00000000..407a6a15
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+
+ MdEditorRT Documentation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/preview-en-US.md b/docs/preview-en-US.md
new file mode 100644
index 00000000..ba364f5a
--- /dev/null
+++ b/docs/preview-en-US.md
@@ -0,0 +1,72 @@
+## 😲 md-editor-rt
+
+Markdown Editor for React, developed in jsx and typescript, support different themes、beautify content by prettier.
+
+### 🤖 Base
+
+**bold**, underline, _italic_, ~~line-through~~, superscript26，subscript[1]，`inline code`，[link](https://imzbf.cc)
+
+> quote: I Have a Dream
+
+1. So even though we face the difficulties of today and tomorrow, I still have a dream.
+2. It is a dream deeply rooted in the American dream.
+3. I have a dream that one day this nation will rise up.
+
+- [ ] Friday
+- [ ] Saturday
+- [x] Sunday
+
+
+
+## 🤗 Demo
+
+```js
+import { defineComponent, ref } from 'vue';
+import { MdEditor } from 'md-editor-rt';
+import 'md-editor-rt/lib/style.css';
+
+export default defineComponent({
+ name: 'MdEditor',
+ setup() {
+ const text = ref('');
+ return () => (
+ (text.value = v)} />
+ );
+ }
+});
+```
+
+## 🖨 Text
+
+The Old Man and the Sea served to reinvigorate Hemingway's literary reputation and prompted a reexamination of his entire body of work.
+
+## 📈 Table
+
+| nickname | from |
+| -------- | ---------------- |
+| zhijian | ChongQing, China |
+
+## 📏 Formula
+
+Inline: $x+y^{2x}$
+
+$$
+\sqrt[3]{x}
+$$
+
+## 🧬 Diagram
+
+```mermaid
+flowchart TD
+ Start --> Stop
+```
+
+## 🪄 Alert
+
+!!! note Supported Types
+
+note、abstract、info、tip、success、question、warning、failure、danger、bug、example、quote、hint、caution、error、attention
+
+!!!
+
+## ☘️ em...
diff --git a/docs/preview-zh-CN.md b/docs/preview-zh-CN.md
new file mode 100644
index 00000000..85cb638f
--- /dev/null
+++ b/docs/preview-zh-CN.md
@@ -0,0 +1,72 @@
+## 😲 md-editor-rt
+
+Markdown 编辑器，React 版本，使用 jsx 和 typescript 语法开发，支持切换主题、prettier 美化文本等。
+
+### 🤖 基本演示
+
+**加粗**，下划线，_斜体_，~~删除线~~，上标26，下标[1]，`inline code`，[超链接](https://imzbf.cc)
+
+> 引用：《I Have a Dream》
+
+1. So even though we face the difficulties of today and tomorrow, I still have a dream.
+2. It is a dream deeply rooted in the American dream.
+3. I have a dream that one day this nation will rise up.
+
+- [ ] 周五
+- [ ] 周六
+- [x] 周天
+
+
+
+## 🤗 代码演示
+
+```js
+import { defineComponent, ref } from 'vue';
+import { MdEditor } from 'md-editor-rt';
+import 'md-editor-rt/lib/style.css';
+
+export default defineComponent({
+ name: 'MdEditor',
+ setup() {
+ const text = ref('');
+ return () => (
+ (text.value = v)} />
+ );
+ }
+});
+```
+
+## 🖨 文本演示
+
+依照普朗克长度这项单位，目前可观测的宇宙的直径估计值（直径约 930 亿光年，即 8.8 × 1026 米）即为 5.4 × 1061倍普朗克长度。而可观测宇宙体积则为 8.4 × 10184立方普朗克长度（普朗克体积）。
+
+## 📈 表格演示
+
+| 昵称 | 来自 |
+| ---- | --------- |
+| 之间 | 中国-重庆 |
+
+## 📏 公式
+
+行内：$x+y^{2x}$
+
+$$
+\sqrt[3]{x}
+$$
+
+## 🧬 图表
+
+```mermaid
+flowchart TD
+ Start --> Stop
+```
+
+## 🪄 提示
+
+!!! note 支持的类型
+
+note、abstract、info、tip、success、question、warning、failure、danger、bug、example、quote、hint、caution、error、attention
+
+!!!
+
+## ☘️ 占个坑@！