From 691cd38c514e44c0fa35f5039de9043fe81a418e Mon Sep 17 00:00:00 2001
From: Takagi <1103069291@qq.com>
Date: Thu, 2 Nov 2023 10:54:50 +0800
Subject: [PATCH] fix: optimize editor performance and resolve freezing issues
 (#4805)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind bug

#### What this PR does / why we need it:

优化了编辑器的性能，并解决了卡死现象。具体措施如下：

1. 编辑器异步加载时，由于其 component 并不会使用响应式，所以也无需进行代理，因此使用 `markRaw` 将其转为普通对象，可以优化 vue 性能。
2. 由于 `DefaultEditor` 有多个根节点导致透传的 attrs 无法设置，因此新增一个 div 节点将其原有节点包裹。参见 https://cn.vuejs.org/guide/components/attrs.html#attribute-inheritance-on-multiple-root-nodes 。
3. 原有编辑器实例在切换路由之后不会释放，此次修改之后，将在 vue 的 `onBeforeUnmount` 时间中手动释放编辑器实例。

#### How to test it?

1. 新建文章，新建一个表格。
2. 不要保存，点击文章路由跳出编辑器界面，再次点击上一次所编辑器的文章，查看是否会卡死。

#### Which issue(s) this PR fixes:

Fixes #4798

#### Does this PR introduce a user-facing change?
```release-note
优化编辑器性能并解决切换页面所造成的卡死现象
```
---
 .../src/components/editor/DefaultEditor.vue   | 349 +++++++++---------
 .../use-editor-extension-points.ts            |  14 +-
 2 files changed, 186 insertions(+), 177 deletions(-)

diff --git a/console/src/components/editor/DefaultEditor.vue b/console/src/components/editor/DefaultEditor.vue
index 63235794cd..23aff4ab0e 100644
--- a/console/src/components/editor/DefaultEditor.vue
+++ b/console/src/components/editor/DefaultEditor.vue
@@ -86,6 +86,7 @@ import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
 import { usePluginModuleStore } from "@/stores/plugin";
 import type { PluginModule } from "@halo-dev/console-shared";
 import { useDebounceFn } from "@vueuse/core";
+import { onBeforeUnmount } from "vue";
 
 const { t } = useI18n();
 
@@ -355,6 +356,10 @@ onMounted(() => {
   });
 });
 
+onBeforeUnmount(() => {
+  editor.value?.destroy();
+});
+
 // image drag and paste upload
 const { policies } = useFetchAttachmentPolicy();
 
@@ -491,203 +496,205 @@ const currentLocale = i18n.global.locale.value as
 </script>
 
 <template>
-  <AttachmentSelectorModal
-    v-model:visible="attachmentSelectorModal"
-    @select="onAttachmentSelect"
-  />
-  <RichTextEditor v-if="editor" :editor="editor" :locale="currentLocale">
-    <template #extra>
-      <OverlayScrollbarsComponent
-        element="div"
-        :options="{ scrollbars: { autoHide: 'scroll' } }"
-        class="h-full border-l bg-white"
-        defer
-      >
-        <VTabs v-model:active-id="extraActiveId" type="outline">
-          <VTabItem
-            id="toc"
-            :label="$t('core.components.default_editor.tabs.toc.title')"
-          >
-            <div class="p-1 pt-0">
-              <ul v-if="headingNodes?.length" class="space-y-1">
-                <li
-                  v-for="(node, index) in headingNodes"
-                  :key="index"
-                  :class="[
-                    { 'bg-gray-100': node.id === selectedHeadingNode?.id },
-                  ]"
-                  class="group cursor-pointer truncate rounded-base px-1.5 py-1 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
-                  @click="handleSelectHeadingNode(node)"
-                >
-                  <div
-                    :style="{
-                      paddingLeft: `${(node.level - 1) * 0.8}rem`,
-                    }"
-                    class="flex items-center gap-2"
+  <div>
+    <AttachmentSelectorModal
+      v-model:visible="attachmentSelectorModal"
+      @select="onAttachmentSelect"
+    />
+    <RichTextEditor v-if="editor" :editor="editor" :locale="currentLocale">
+      <template #extra>
+        <OverlayScrollbarsComponent
+          element="div"
+          :options="{ scrollbars: { autoHide: 'scroll' } }"
+          class="h-full border-l bg-white"
+          defer
+        >
+          <VTabs v-model:active-id="extraActiveId" type="outline">
+            <VTabItem
+              id="toc"
+              :label="$t('core.components.default_editor.tabs.toc.title')"
+            >
+              <div class="p-1 pt-0">
+                <ul v-if="headingNodes?.length" class="space-y-1">
+                  <li
+                    v-for="(node, index) in headingNodes"
+                    :key="index"
+                    :class="[
+                      { 'bg-gray-100': node.id === selectedHeadingNode?.id },
+                    ]"
+                    class="group cursor-pointer truncate rounded-base px-1.5 py-1 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+                    @click="handleSelectHeadingNode(node)"
                   >
-                    <component
-                      :is="headingIcons[node.level]"
-                      class="h-4 w-4 rounded-sm bg-gray-100 p-0.5 group-hover:bg-white"
-                      :class="[
-                        { '!bg-white': node.id === selectedHeadingNode?.id },
-                      ]"
-                    />
-                    <span class="flex-1 truncate">{{ node.text }}</span>
-                  </div>
-                </li>
-              </ul>
-              <div v-else class="flex flex-col items-center py-10">
-                <span class="text-sm text-gray-600">
-                  {{ $t("core.components.default_editor.tabs.toc.empty") }}
-                </span>
-              </div>
-            </div>
-          </VTabItem>
-          <VTabItem
-            id="information"
-            :label="$t('core.components.default_editor.tabs.detail.title')"
-          >
-            <div class="flex flex-col gap-2 p-1 pt-0">
-              <div class="grid grid-cols-2 gap-2">
-                <div
-                  class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
-                >
-                  <div class="flex items-center justify-between">
                     <div
-                      class="text-sm text-gray-500 group-hover:text-gray-900"
+                      :style="{
+                        paddingLeft: `${(node.level - 1) * 0.8}rem`,
+                      }"
+                      class="flex items-center gap-2"
                     >
-                      {{
-                        $t(
-                          "core.components.default_editor.tabs.detail.fields.character_count"
-                        )
-                      }}
-                    </div>
-                    <div class="rounded bg-gray-200 p-0.5">
-                      <IconCharacterRecognition
-                        class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
+                      <component
+                        :is="headingIcons[node.level]"
+                        class="h-4 w-4 rounded-sm bg-gray-100 p-0.5 group-hover:bg-white"
+                        :class="[
+                          { '!bg-white': node.id === selectedHeadingNode?.id },
+                        ]"
                       />
+                      <span class="flex-1 truncate">{{ node.text }}</span>
                     </div>
-                  </div>
-                  <div class="text-base font-medium text-gray-900">
-                    {{ editor.storage.characterCount.characters() }}
-                  </div>
+                  </li>
+                </ul>
+                <div v-else class="flex flex-col items-center py-10">
+                  <span class="text-sm text-gray-600">
+                    {{ $t("core.components.default_editor.tabs.toc.empty") }}
+                  </span>
                 </div>
-                <div
-                  class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
-                >
-                  <div class="flex items-center justify-between">
-                    <div
-                      class="text-sm text-gray-500 group-hover:text-gray-900"
-                    >
-                      {{
-                        $t(
-                          "core.components.default_editor.tabs.detail.fields.word_count"
-                        )
-                      }}
+              </div>
+            </VTabItem>
+            <VTabItem
+              id="information"
+              :label="$t('core.components.default_editor.tabs.detail.title')"
+            >
+              <div class="flex flex-col gap-2 p-1 pt-0">
+                <div class="grid grid-cols-2 gap-2">
+                  <div
+                    class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
+                  >
+                    <div class="flex items-center justify-between">
+                      <div
+                        class="text-sm text-gray-500 group-hover:text-gray-900"
+                      >
+                        {{
+                          $t(
+                            "core.components.default_editor.tabs.detail.fields.character_count"
+                          )
+                        }}
+                      </div>
+                      <div class="rounded bg-gray-200 p-0.5">
+                        <IconCharacterRecognition
+                          class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
+                        />
+                      </div>
                     </div>
-                    <div class="rounded bg-gray-200 p-0.5">
-                      <IconCharacterRecognition
-                        class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
-                      />
+                    <div class="text-base font-medium text-gray-900">
+                      {{ editor.storage.characterCount.characters() }}
                     </div>
                   </div>
-                  <div class="text-base font-medium text-gray-900">
-                    {{ editor.storage.characterCount.words() }}
+                  <div
+                    class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
+                  >
+                    <div class="flex items-center justify-between">
+                      <div
+                        class="text-sm text-gray-500 group-hover:text-gray-900"
+                      >
+                        {{
+                          $t(
+                            "core.components.default_editor.tabs.detail.fields.word_count"
+                          )
+                        }}
+                      </div>
+                      <div class="rounded bg-gray-200 p-0.5">
+                        <IconCharacterRecognition
+                          class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
+                        />
+                      </div>
+                    </div>
+                    <div class="text-base font-medium text-gray-900">
+                      {{ editor.storage.characterCount.words() }}
+                    </div>
                   </div>
                 </div>
-              </div>
 
-              <div v-if="publishTime" class="grid grid-cols-1 gap-2">
-                <div
-                  class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
-                >
-                  <div class="flex items-center justify-between">
-                    <div
-                      class="text-sm text-gray-500 group-hover:text-gray-900"
-                    >
+                <div v-if="publishTime" class="grid grid-cols-1 gap-2">
+                  <div
+                    class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
+                  >
+                    <div class="flex items-center justify-between">
+                      <div
+                        class="text-sm text-gray-500 group-hover:text-gray-900"
+                      >
+                        {{
+                          $t(
+                            "core.components.default_editor.tabs.detail.fields.publish_time"
+                          )
+                        }}
+                      </div>
+                      <div class="rounded bg-gray-200 p-0.5">
+                        <IconCalendar
+                          class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
+                        />
+                      </div>
+                    </div>
+                    <div class="text-base font-medium text-gray-900">
                       {{
+                        formatDatetime(publishTime) ||
                         $t(
-                          "core.components.default_editor.tabs.detail.fields.publish_time"
+                          "core.components.default_editor.tabs.detail.fields.draft"
                         )
                       }}
                     </div>
-                    <div class="rounded bg-gray-200 p-0.5">
-                      <IconCalendar
-                        class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
-                      />
-                    </div>
-                  </div>
-                  <div class="text-base font-medium text-gray-900">
-                    {{
-                      formatDatetime(publishTime) ||
-                      $t(
-                        "core.components.default_editor.tabs.detail.fields.draft"
-                      )
-                    }}
                   </div>
                 </div>
-              </div>
-              <div v-if="owner" class="grid grid-cols-1 gap-2">
-                <div
-                  class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
-                >
-                  <div class="flex items-center justify-between">
-                    <div
-                      class="text-sm text-gray-500 group-hover:text-gray-900"
-                    >
-                      {{
-                        $t(
-                          "core.components.default_editor.tabs.detail.fields.owner"
-                        )
-                      }}
+                <div v-if="owner" class="grid grid-cols-1 gap-2">
+                  <div
+                    class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
+                  >
+                    <div class="flex items-center justify-between">
+                      <div
+                        class="text-sm text-gray-500 group-hover:text-gray-900"
+                      >
+                        {{
+                          $t(
+                            "core.components.default_editor.tabs.detail.fields.owner"
+                          )
+                        }}
+                      </div>
+                      <div class="rounded bg-gray-200 p-0.5">
+                        <IconUserFollow
+                          class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
+                        />
+                      </div>
                     </div>
-                    <div class="rounded bg-gray-200 p-0.5">
-                      <IconUserFollow
-                        class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
-                      />
+                    <div class="text-base font-medium text-gray-900">
+                      {{ owner }}
                     </div>
                   </div>
-                  <div class="text-base font-medium text-gray-900">
-                    {{ owner }}
-                  </div>
                 </div>
-              </div>
-              <div v-if="permalink" class="grid grid-cols-1 gap-2">
-                <div
-                  class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
-                >
-                  <div class="flex items-center justify-between">
-                    <div
-                      class="text-sm text-gray-500 group-hover:text-gray-900"
-                    >
-                      {{
-                        $t(
-                          "core.components.default_editor.tabs.detail.fields.permalink"
-                        )
-                      }}
+                <div v-if="permalink" class="grid grid-cols-1 gap-2">
+                  <div
+                    class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
+                  >
+                    <div class="flex items-center justify-between">
+                      <div
+                        class="text-sm text-gray-500 group-hover:text-gray-900"
+                      >
+                        {{
+                          $t(
+                            "core.components.default_editor.tabs.detail.fields.permalink"
+                          )
+                        }}
+                      </div>
+                      <div class="rounded bg-gray-200 p-0.5">
+                        <IconLink
+                          class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
+                        />
+                      </div>
                     </div>
-                    <div class="rounded bg-gray-200 p-0.5">
-                      <IconLink
-                        class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
-                      />
+                    <div>
+                      <a
+                        :href="permalink"
+                        :title="permalink"
+                        target="_blank"
+                        class="text-sm text-gray-900 hover:text-blue-600"
+                      >
+                        {{ permalink }}
+                      </a>
                     </div>
                   </div>
-                  <div>
-                    <a
-                      :href="permalink"
-                      :title="permalink"
-                      target="_blank"
-                      class="text-sm text-gray-900 hover:text-blue-600"
-                    >
-                      {{ permalink }}
-                    </a>
-                  </div>
                 </div>
               </div>
-            </div>
-          </VTabItem>
-        </VTabs>
-      </OverlayScrollbarsComponent>
-    </template>
-  </RichTextEditor>
+            </VTabItem>
+          </VTabs>
+        </OverlayScrollbarsComponent>
+      </template>
+    </RichTextEditor>
+  </div>
 </template>
diff --git a/console/src/composables/use-editor-extension-points.ts b/console/src/composables/use-editor-extension-points.ts
index 0dbbff05de..a1f3ab75a7 100644
--- a/console/src/composables/use-editor-extension-points.ts
+++ b/console/src/composables/use-editor-extension-points.ts
@@ -1,6 +1,6 @@
 import { usePluginModuleStore } from "@/stores/plugin";
 import type { EditorProvider, PluginModule } from "@halo-dev/console-shared";
-import { onMounted, ref, type Ref, defineAsyncComponent } from "vue";
+import { onMounted, ref, type Ref, defineAsyncComponent, markRaw } from "vue";
 import { VLoading } from "@halo-dev/components";
 import Logo from "@/assets/logo.png";
 import { useI18n } from "vue-i18n";
@@ -18,11 +18,13 @@ export function useEditorExtensionPoints(): useEditorExtensionPointsReturn {
     {
       name: "default",
       displayName: t("core.plugin.extension_points.editor.providers.default"),
-      component: defineAsyncComponent({
-        loader: () => import("@/components/editor/DefaultEditor.vue"),
-        loadingComponent: VLoading,
-        delay: 200,
-      }),
+      component: markRaw(
+        defineAsyncComponent({
+          loader: () => import("@/components/editor/DefaultEditor.vue"),
+          loadingComponent: VLoading,
+          delay: 200,
+        })
+      ),
       rawType: "HTML",
       logo: Logo,
     },