From 8ea397da5ce247a9f2bd6ac6ec2246fe13f26b19 Mon Sep 17 00:00:00 2001
From: XinKeng <29268441+gengxiaoxiaoxin@users.noreply.github.com>
Date: Mon, 21 Aug 2023 01:14:12 +0800
Subject: [PATCH] perf: increasing the editor performance (#4445)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A function to debounce editor updates was added to the DefaultEditor.vue component. This change was necessary to prevent excessive event executions. Now, 'update:raw', 'update:content', and 'update' events will be emitted 250ms after the last update, reducing the number of redundant operations and increasing the editor's performance.

<!--  Thanks for sending a pull request!  Here are some tips for you:
1. 如果这是你的第一次，请阅读我们的贡献指南：<https://github.com/halo-dev/halo/blob/master/CONTRIBUTING.md>。
1. If this is your first time, please read our contributor guidelines: <https://github.com/halo-dev/halo/blob/master/CONTRIBUTING.md>.
2. 请根据你解决问题的类型为 Pull Request 添加合适的标签。
2. Please label this pull request according to what type of issue you are addressing, especially if this is a release targeted pull request.
3. 请确保你已经添加并运行了适当的测试。
3. Ensure you have added or ran the appropriate tests for your PR.
-->

#### What type of PR is this?
/kind improvement

<!--
添加其中一个类别：
Add one of the following kinds:

/kind bug
/kind cleanup
/kind documentation
/kind feature
/kind improvement

适当添加其中一个或多个类别（可选）：
Optionally add one or more of the following kinds if applicable:

/kind api-change
/kind deprecation
/kind failing-test
/kind flake
/kind regression
-->

#### What this PR does / why we need it:
目前默认编辑器在文章内容过多时，会出现输入延迟。
#### Which issue(s) this PR fixes:

<!--
PR 合并时自动关闭 issue。
Automatically closes linked issue when PR is merged.

用法：`Fixes #<issue 号>`，或者 `Fixes (粘贴 issue 完整链接)`
Usage: `Fixes #<issue number>`, or `Fixes (paste link of issue)`.
-->
Fixes #4389

#### Special notes for your reviewer:

#### Does this PR introduce a user-facing change?

<!--
如果当前 Pull Request 的修改不会造成用户侧的任何变更，在 `release-note` 代码块儿中填写 `NONE`。
否则请填写用户侧能够理解的 Release Note。如果当前 Pull Request 包含破坏性更新（Break Change），
Release Note 需要以 `action required` 开头。
If no, just write "NONE" in the release-note block below.
If yes, a release note is required:
Enter your extended release note in the block below. If the PR requires additional action from users switching to the new release, include the string "action required".
-->

```release-note
增强默认编辑器在文章内容过大时的性能。
```
---
 console/src/components/editor/DefaultEditor.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/console/src/components/editor/DefaultEditor.vue b/console/src/components/editor/DefaultEditor.vue
index 9d424d777..38ea17c28 100644
--- a/console/src/components/editor/DefaultEditor.vue
+++ b/console/src/components/editor/DefaultEditor.vue
@@ -78,6 +78,7 @@ import { useI18n } from "vue-i18n";
 import { i18n } from "@/locales";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
 import { usePluginModuleStore, type PluginModule } from "@/stores/plugin";
+import { useDebounceFn } from "@vueuse/core";
 
 const { t } = useI18n();
 
@@ -141,6 +142,14 @@ onMounted(() => {
     extensionsFromPlugins.push(...extensions);
   });
 
+  // debounce OnUpdate
+  const debounceOnUpdate = useDebounceFn(() => {
+    const html = editor.value?.getHTML() + "";
+    emit("update:raw", html);
+    emit("update:content", html);
+    emit("update", html);
+  }, 250);
+
   editor.value = new Editor({
     content: props.raw,
     extensions: [
@@ -236,9 +245,7 @@ onMounted(() => {
     ],
     autofocus: "start",
     onUpdate: () => {
-      emit("update:raw", editor.value?.getHTML() + "");
-      emit("update:content", editor.value?.getHTML() + "");
-      emit("update", editor.value?.getHTML() + "");
+      debounceOnUpdate();
       nextTick(() => {
         handleGenerateTableOfContent();
       });