refactor: remove the codemirror of the component package and change it to built-in (#3926)

#### What type of PR is this?

/kind improvement
/area console
/milestone 2.6.x

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

从 `@halo-dev/components` 包中移除 VCodemirror 组件，改为由 Console 内置。因为观察到 VCodemirror 暂时无法支持 Tree Shaking，即代表如果在其他地方引入了 `@halo-dev/components`，就算没有使用 VCodemirror 组件，也会构建到生产产物。

此外，内置到 Console 之后，改为了异步加载此组件，即进入到使用了 VCodemirror 的组件的页面才会加载相应资源。

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

Fixes https://github.com/halo-dev/halo/issues/3469

#### Special notes for your reviewer:

测试方式：

1. Console 需要 `pnpm build:packages`
2. 测试系统设置中的代码注入部分，观察输入框是否加载正常即可。

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

```release-note
None
```

console/package.json

@@ -34,6 +34,16 @@
     "packages/*"
   ],
   "dependencies": {
+    "@codemirror/commands": "^6.1.2",
+    "@codemirror/lang-css": "^6.0.1",
+    "@codemirror/lang-html": "^6.2.0",
+    "@codemirror/lang-javascript": "^6.1.1",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/language": "^6.3.1",
+    "@codemirror/legacy-modes": "^6.3.0",
+    "@codemirror/state": "^6.1.4",
+    "@codemirror/view": "^6.5.1",
+    "codemirror": "^6.0.1",
     "@emoji-mart/data": "^1.0.8",
     "@formkit/core": "^0.16.4",
     "@formkit/i18n": "^0.16.4",

console/packages/components/package.json

@@ -62,16 +62,6 @@
     "./dist/style.css": "./dist/style.css"
   },
   "dependencies": {
-    "@codemirror/commands": "^6.1.2",
-    "@codemirror/lang-css": "^6.0.1",
-    "@codemirror/lang-html": "^6.2.0",
-    "@codemirror/lang-javascript": "^6.1.1",
-    "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/language": "^6.3.1",
-    "@codemirror/legacy-modes": "^6.3.0",
-    "@codemirror/state": "^6.1.4",
-    "@codemirror/view": "^6.5.1",
-    "codemirror": "^6.0.1",
     "floating-vue": "2.0.0-beta.20"
   }
 }

console/packages/components/src/components.ts

@@ -11,7 +11,6 @@ export * from "./components/tag";
 export * from "./components/switch";
 export * from "./components/dialog";
 export * from "./components/pagination";
-export * from "./components/codemirror";
 export * from "./components/empty";
 export * from "./components/status";
 export * from "./components/entity";

console/packages/components/src/components/codemirror/Codemirror.story.vue

@@ -1,16 +0,0 @@
-<script lang="ts" setup>
-import { VCodemirror } from "./index";
-
-function initState() {
-  return {
-    value: "Hello Halo",
-  };
-}
-</script>
-<template>
-  <Story :init-state="initState" title="Codemirror">
-    <template #default="{ state }">
-      <VCodemirror v-model="state.value" height="500px" language="html" />
-    </template>
-  </Story>
-</template>

console/packages/components/src/components/codemirror/__tests__/Codemirror.spec.ts

@@ -1,9 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { mount } from "@vue/test-utils";
-import { VCodemirror } from "../index";
-
-describe("Codemirror", () => {
-  it("should render", () => {
-    expect(mount(VCodemirror)).toBeDefined();
-  });
-});

console/packages/components/src/components/codemirror/index.ts

@@ -1 +0,0 @@
-export { default as VCodemirror } from "./Codemirror.vue";

console/pnpm-lock.yaml

@@ -5,6 +5,15 @@ importers:
   .:
     specifiers:
       '@changesets/cli': ^2.25.2
+      '@codemirror/commands': ^6.1.2
+      '@codemirror/lang-css': ^6.0.1
+      '@codemirror/lang-html': ^6.2.0
+      '@codemirror/lang-javascript': ^6.1.1
+      '@codemirror/lang-json': ^6.0.1
+      '@codemirror/language': ^6.3.1
+      '@codemirror/legacy-modes': ^6.3.0
+      '@codemirror/state': ^6.1.4
+      '@codemirror/view': ^6.5.1
       '@emoji-mart/data': ^1.0.8
       '@formkit/core': ^0.16.4
       '@formkit/i18n': ^0.16.4
@@ -57,6 +66,7 @@ importers:
       autoprefixer: ^10.4.14
       axios: ^0.27.2
       c8: ^7.12.0
+      codemirror: ^6.0.1
       colorjs.io: ^0.4.3
       cypress: ^10.11.0
       dayjs: ^1.11.7
@@ -109,6 +119,15 @@ importers:
       vue-tsc: ^1.0.24
       vuedraggable: ^4.1.0
     dependencies:
+      '@codemirror/commands': 6.1.2
+      '@codemirror/lang-css': 6.0.1_gu445lycfriim3kznnyeahleva
+      '@codemirror/lang-html': 6.2.0
+      '@codemirror/lang-javascript': 6.1.1
+      '@codemirror/lang-json': 6.0.1
+      '@codemirror/language': 6.3.1
+      '@codemirror/legacy-modes': 6.3.0
+      '@codemirror/state': 6.1.4
+      '@codemirror/view': 6.5.1
       '@emoji-mart/data': 1.0.8
       '@formkit/core': 0.16.4
       '@formkit/i18n': 0.16.4
@@ -137,6 +156,7 @@ importers:
       '@vueuse/router': 9.6.0_xsxatmlnmmg5bcuv3xdnj6fj7y
       '@vueuse/shared': 9.6.0_vue@3.2.45
       axios: 0.27.2
+      codemirror: 6.0.1_@lezer+common@1.0.1
       colorjs.io: 0.4.3
       dayjs: 1.11.7
       emoji-mart: 5.3.3
@@ -235,18 +255,8 @@ importers:
 
   packages/components:
     specifiers:
-      '@codemirror/commands': ^6.1.2
-      '@codemirror/lang-css': ^6.0.1
-      '@codemirror/lang-html': ^6.2.0
-      '@codemirror/lang-javascript': ^6.1.1
-      '@codemirror/lang-json': ^6.0.1
-      '@codemirror/language': ^6.3.1
-      '@codemirror/legacy-modes': ^6.3.0
-      '@codemirror/state': ^6.1.4
-      '@codemirror/view': ^6.5.1
       '@histoire/plugin-vue': ^0.11.7
       '@iconify-json/ri': ^1.1.4
-      codemirror: ^6.0.1
       floating-vue: 2.0.0-beta.20
       histoire: ^0.11.7
       unplugin-icons: ^0.14.14
@@ -254,16 +264,6 @@ importers:
       vue: ^3.2.37
       vue-router: ^4.0.16
     dependencies:
-      '@codemirror/commands': 6.1.2
-      '@codemirror/lang-css': 6.0.1_gu445lycfriim3kznnyeahleva
-      '@codemirror/lang-html': 6.2.0
-      '@codemirror/lang-javascript': 6.1.1
-      '@codemirror/lang-json': 6.0.1
-      '@codemirror/language': 6.3.1
-      '@codemirror/legacy-modes': 6.3.0
-      '@codemirror/state': 6.1.4
-      '@codemirror/view': 6.5.1
-      codemirror: 6.0.1_@lezer+common@1.0.1
       floating-vue: 2.0.0-beta.20_vue@3.2.45
       vue: 3.2.45
       vue-router: 4.1.6_vue@3.2.45

console/src/formkit/inputs/code/CodeInput.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import type { FormKitFrameworkContext } from "@formkit/core";
-import { VCodemirror } from "@halo-dev/components";
 import type { PropType } from "vue";
 
 const props = defineProps({
@@ -19,12 +18,19 @@ const onChange = (value: string) => {
 </script>
 
 <template>
-  <VCodemirror
-    :model-value="props.context._value"
-    v-bind="context.attrs"
-    :height="height"
-    :language="language"
-    class="block w-full"
-    @change="onChange"
-  />
+  <Suspense>
+    <VCodemirror
+      :model-value="props.context._value"
+      v-bind="context.attrs"
+      :height="height"
+      :language="language"
+      class="block w-full"
+      @change="onChange"
+    />
+    <template #fallback>
+      <span class="p-1 text-xs text-gray-400">
+        {{ $t("core.common.status.loading") }}...
+      </span>
+    </template>
+  </Suspense>
 </template>

console/src/setup/setupComponents.ts

@@ -1,4 +1,4 @@
-import type { App } from "vue";
+import { defineAsyncComponent, type App } from "vue";
 import { VClosePopper, VTooltip } from "@halo-dev/components";
 import { Dropdown } from "floating-vue";
 import "floating-vue/dist/style.css";
@@ -21,4 +21,8 @@ export function setupComponents(app: App) {
   // @deprecated
   // Will be removed in the future, please use the VDropdown component from @halo-dev/components.
   app.component("FloatingDropdown", Dropdown);
+  app.component(
+    "VCodemirror",
+    defineAsyncComponent(() => import("@/components/codemirror/Codemirror.vue"))
+  );
 }