From 46f3fd1cb62b56ab085b439a231b9297714a8ab6 Mon Sep 17 00:00:00 2001
From: Oyasuminasai <61616918+nfnfgo@users.noreply.github.com>
Date: Mon, 21 Oct 2024 23:00:46 +0800
Subject: [PATCH 1/6] fix: Fix scroll issue. Add scroll bar when overflow.

---
 src/components/code_block.jsx |  2 +-
 src/style/markdown.css        | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/code_block.jsx b/src/components/code_block.jsx
index 2a5f35b..dede368 100644
--- a/src/components/code_block.jsx
+++ b/src/components/code_block.jsx
@@ -33,7 +33,7 @@ export function HighLightedCodeBlock({ content, lang, markdownItIns }) {
         mditLogger('error', `hljs error:`, e);
     }
 
-    return (<pre className='hljs hl-code-block'>
+    return (<pre className='hljs hl-code-block mdit-fenced-code-block'>
         <button className='lang_copy'>
             <p className='lang'>{lang}</p>
             <p className='copy'>复制</p>
diff --git a/src/style/markdown.css b/src/style/markdown.css
index 4c72772..e07ecc0 100644
--- a/src/style/markdown.css
+++ b/src/style/markdown.css
@@ -193,4 +193,17 @@ button.mdit-show-origin-button {
     padding-inline: 2px;
     /* text-underline: auto; */
     border-width: 0px;
+}
+
+pre.mdit-fenced-code-block>code {
+    width: 100%;
+    display: block;
+    overflow-y: auto;
+    scrollbar-width: thin;
+}
+
+@media (prefers-color-scheme: dark) {
+    pre.mdit-fenced-code-block>code {
+        color-scheme: dark;
+    }
 }
\ No newline at end of file

From 199d651a1329d96ff967be8a1e49940bb7a6f1c7 Mon Sep 17 00:00:00 2001
From: Oyasuminasai <61616918+nfnfgo@users.noreply.github.com>
Date: Mon, 21 Oct 2024 16:46:51 +0800
Subject: [PATCH 2/6] doc: Remove fixed lite tools issue from known issue doc.

---
 docs/known_issue.md | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/docs/known_issue.md b/docs/known_issue.md
index 5b2cfb7..b5c6619 100644
--- a/docs/known_issue.md
+++ b/docs/known_issue.md
@@ -1,15 +1,5 @@
 This document is used to record some Known Issue of this plugin.
 
-# Compatability Issue With Other Plugin
-
-Currently we found that sometimes it would cause incorrect rendering behaviour when using this plugin with `LiteTools`(another QQNT plugin). And user may experience:
-
-- Incorrect LiteTools Slot rendering position. For example, the *Message Send Time* and *Withdrawed* slot may be rendered with incorrect position / alignment.
-
-Currently the workaround for the LiteTool Time slot is to use JavaScript to observe the `offsetHeight` of each message box. If it over a specific value, we consider this message a multiple-line message and set the `flex-direction: column` to the root message box, otherwise set `flex-direction: row`.
-
-This require change message box div into `flex` which may cause other rendering issue, and this workaround should be replaced by a better solution.
-
 # Post Rendering Function Exec Order Issue
 
 Currently, we call `renderSingleMsgBox()` function inside `render()`, then after we call some post-rendering functions, the whole process is like: 
@@ -26,4 +16,4 @@ elementDebugLogger();
 
 However the issue is the *MarkdownIt* render function returns Promise, so the `renderSingleMsgBox()` is an async function. And so, the post-rendering function below actually may run first while the message is not fully rendererd.
 
-Currently we do NOT implement any workaround on this since the test show this issue don't affect the rendering result for now. However this is something that should be fixed in the future.
\ No newline at end of file
+Currently we do NOT implement any workaround on this since the test show this issue don't affect the rendering result for now. However this is something that should be fixed in the future.

From 37fb2076fcdd620968d45ec84e289e3323d929fd Mon Sep 17 00:00:00 2001
From: Oyasuminasai <61616918+nfnfgo@users.noreply.github.com>
Date: Mon, 21 Oct 2024 17:04:42 +0800
Subject: [PATCH 3/6] doc: Update rendering process doc.

---
 docs/dev/msg_rendering_process.md | 31 ++++++++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/docs/dev/msg_rendering_process.md b/docs/dev/msg_rendering_process.md
index d4cd6b9..a8b21ed 100644
--- a/docs/dev/msg_rendering_process.md
+++ b/docs/dev/msg_rendering_process.md
@@ -9,11 +9,32 @@
 
 # Workflow
 
-Currently the plugin does NOT rendering all content inside a message box. We only deal with contents that may need go through the markdown renderer. Also, since some element should NOT be considered as Markdown when rendering and should keep what it look like throughout the rendering, we introduced the concept of **Fragement Processor**(FragProcessor).
+Currently the plugin does NOT rendering all content inside a message box. We only deal with contents that may need go through the markdown renderer. Also, since some element should NOT be considered as Markdown when rendering and should keep what it look like throughout the rendering, we introduced the concept of **Fragment Processor** _(FragProcessor)_.
 
 ## Fragments
 
-As you see, we **consider the `childern` of the message box as a "fragment"**. Then we have **a list of `FragProcessor`, each takes in charge of render a certain type of fragments**.
+When dealing with QQNT messages, we considered a message `span` as a basic rendering unit. A general QQNT message HTML element has the folloing structure:
+
+```
+- span.mix-message__inner
+  - span.text_element
+    - span / p / ...
+  - span.text_element_at
+  - span.other_element
+```
+
+In conclusion:
+
+- A `span.mix-message__inner` is related to a single message box, we will use `msgBox` to refer to it below.
+- A `msgBox` could have multiple `span.*_element_*` span, which's classname indictas the content type of this span, for example, a pure text, an emoji or a image etc.
+
+Here, we **consider the `span` children of the msgBox as the "fragments" of this message**. Then we have **a list of `FragProcessor`, each takes in charge of catching and rendering a certain type of fragments**.
+
+For example, we could have:
+
+- `TextFragProcessor` who deal with `span.text-element` fragments.
+- `EmojiFragProcessor` who deal with emoji info in fragments.
+- ...
 
 ## Fragment Processor
 
@@ -27,7 +48,7 @@ type FragmentProcessFunc = (
 ) => FragmentProcessFuncRetType | undefined;
 ```
 
-When `render()` function is triggered, a provided list of Fragment Processor will be iterated from begin to end **respectively and preemptively**.
+When `render()` function is triggered, for **each fragment** in each message, a **provided list of Fragment Processor** will be iterated from begin to end **respectively and preemptively**.
 
 This means, for a single fragment, once a processor successfully returned a not `undefined` value *(actually it should be `FragmentProcessFuncRetType` obejct)*, the loop is end and the return value is used for this fragment.
 
@@ -46,7 +67,7 @@ interface FragmentProcessFuncRetType {
 
 As you see, it specified the `original` SPAN element, and a new `rendered` element. For now, we just replace the `original` child of `messageBox` with `rendered`.
 
-> **Notice**
+> [!note]
 >
 > Keep in mind that the `original` HTML element passed to Fragment Processor could be directly updated. 
 > 
@@ -87,4 +108,4 @@ For more info about the process, check out source code file:
 
 For outdated doc:
 
-- [Message Rendering Process Doc 2.3.5](./msg_rendering_process_2.3.5.md)
\ No newline at end of file
+- [Message Rendering Process Doc 2.3.5](./msg_rendering_process_2.3.5.md)

From 8914c413e6a86108beda73466afb384b505394df Mon Sep 17 00:00:00 2001
From: Oyasuminasai <61616918+nfnfgo@users.noreply.github.com>
Date: Mon, 21 Oct 2024 17:38:25 +0800
Subject: [PATCH 4/6] doc: Add star history to readme.

---
 README.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 2c0c590..dc668d7 100644
--- a/README.md
+++ b/README.md
@@ -110,6 +110,12 @@ Normal test with HTML Entities & " ' < > .
 
 如果在使用插件时遇到问题，您可以通过 [发起 Issue](https://github.com/d0j1a1701/LiteLoaderQQNT-Markdown/issues/new) 向我们进行反馈。届时请尽可能附上诸如系统版本，插件列表， LiteLoaderQQNT 设置页版本信息截图等可以帮助分析问题的信息。如果你还安装了远程调试插件，可以再附上 Devtools 信息。
 
+## Star History
+
+![Star History Chart](https://api.star-history.com/svg?repos=Ikaleio/LiteLoaderQQNT-Markdown&type=Date)
+
+如果您觉得本项目对您有帮助，可以帮忙点一下Star，谢谢！
+
 ## Contributing
 
-如果您想要为本项目贡献代码，或者想了解本项目的代码相关细节，欢迎阅读 [项目开发文档](/docs/dev/renderer.md) 。
\ No newline at end of file
+如果您想要为本项目贡献代码，或者想了解本项目的代码相关细节，欢迎阅读 [项目开发文档](/docs/dev/renderer.md) 。

From c29991ed5c290a9b25132abf5eae6bc96c605cd2 Mon Sep 17 00:00:00 2001
From: Oyasuminasai <61616918+nfnfgo@users.noreply.github.com>
Date: Tue, 22 Oct 2024 00:09:11 +0800
Subject: [PATCH 5/6] feat: Add contributors & stars history in readme.

---
 README.md | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index dc668d7..1d1e131 100644
--- a/README.md
+++ b/README.md
@@ -110,9 +110,14 @@ Normal test with HTML Entities & " ' < > .
 
 如果在使用插件时遇到问题，您可以通过 [发起 Issue](https://github.com/d0j1a1701/LiteLoaderQQNT-Markdown/issues/new) 向我们进行反馈。届时请尽可能附上诸如系统版本，插件列表， LiteLoaderQQNT 设置页版本信息截图等可以帮助分析问题的信息。如果你还安装了远程调试插件，可以再附上 Devtools 信息。
 
+## Contributors
+
+[![](https://contrib.rocks/image?repo=Ikaleio/LiteLoaderQQNT-Markdown)](https://github.com/Ikaleio/LiteLoaderQQNT-Markdown/graphs/contributors)
+
 ## Star History
 
-![Star History Chart](https://api.star-history.com/svg?repos=Ikaleio/LiteLoaderQQNT-Markdown&type=Date)
+![Stargazers over time](https://starchart.cc/Ikaleio/LiteLoaderQQNT-Markdown.svg?variant=adaptive)
+
 
 如果您觉得本项目对您有帮助，可以帮忙点一下Star，谢谢！
 

From c4e13757dc4516d5bc77a57ac910da184fc14e53 Mon Sep 17 00:00:00 2001
From: Oyasuminasai <61616918+nfnfgo@users.noreply.github.com>
Date: Tue, 22 Oct 2024 10:05:18 +0800
Subject: [PATCH 6/6] doc: Update badge in readme.

---
 README.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 1d1e131..1f2ef5f 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,9 @@
 # LiteLoaderQQNT-Markdown
 
-![GitHub Release](https://img.shields.io/github/v/release/d0j1a1701/LiteLoaderQQNT-Markdown?style=for-the-badge&logo=github) ![GitHub License](https://img.shields.io/github/license/d0j1a1701/LiteLoaderQQNT-Markdown?style=for-the-badge&color=blue) ![GitHub last commit](https://img.shields.io/github/last-commit/d0j1a1701/LiteLoaderQQNT-Markdown?style=for-the-badge&logo=github)
- ![GitHub Issues or Pull Requests](https://img.shields.io/github/issues/d0j1a1701/LiteLoaderQQNT-Markdown?style=for-the-badge&color=rgb(50%2C180%2C50))
+[![GitHub Release](https://img.shields.io/github/v/release/d0j1a1701/LiteLoaderQQNT-Markdown?style=for-the-badge&logo=github)](https://github.com/Ikaleio/LiteLoaderQQNT-Markdown/releases)
+[![GitHub License](https://img.shields.io/github/license/d0j1a1701/LiteLoaderQQNT-Markdown?style=for-the-badge&color=blue)](https://github.com/Ikaleio/LiteLoaderQQNT-Markdown/blob/v4/LICENSE)
+[![GitHub last commit](https://img.shields.io/github/last-commit/d0j1a1701/LiteLoaderQQNT-Markdown?style=for-the-badge&logo=github)](https://github.com/Ikaleio/LiteLoaderQQNT-Markdown/commits/v4/)
+[![GitHub Issues or Pull Requests](https://img.shields.io/github/issues/d0j1a1701/LiteLoaderQQNT-Markdown?style=for-the-badge&color=rgb(50%2C180%2C50))](https://github.com/Ikaleio/LiteLoaderQQNT-Markdown/issues)
 
 
 ## 简介