fix: optimize editor performance and resolve freezing issues (#4805)

#### 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
优化编辑器性能并解决切换页面所造成的卡死现象
```

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,6 +496,7 @@ const currentLocale = i18n.global.locale.value as
 </script>
 
 <template>
+  <div>
     <AttachmentSelectorModal
       v-model:visible="attachmentSelectorModal"
       @select="onAttachmentSelect"
@@ -690,4 +696,5 @@ const currentLocale = i18n.global.locale.value as
         </OverlayScrollbarsComponent>
       </template>
     </RichTextEditor>
+  </div>
 </template>

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({
+      component: markRaw(
+        defineAsyncComponent({
           loader: () => import("@/components/editor/DefaultEditor.vue"),
           loadingComponent: VLoading,
           delay: 200,
-      }),
+        })
+      ),
       rawType: "HTML",
       logo: Logo,
     },