mirror of https://github.com/halo-dev/halo
perf: increasing the editor performance (#4445)
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 增强默认编辑器在文章内容过大时的性能。 ```pull/4459/head
parent
43e1e446b6
commit
8ea397da5c
|
@ -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();
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue