feat: add formkit custom input of codemirror (#672)

#### What type of PR is this?

/kind feature
/milestone 2.0

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

添加 Codemirror 类型的 FormKit 输入框。

在 Vue 单组件中使用：

```vue
<script lang="ts" setup>
const code = ref("")
</script>

<template>
  <FormKit
    v-model="code"
    label="页脚代码"
    type="code"
    validation="required"
  />
</template>
```

在 FormKit Schema 中使用（插件 / 主题设置表单定义）：

```yaml
- $formkit: code
  name: code
  label: 页脚代码
```

#### Screenshots:

<img width="1331" alt="image" src="https://user-images.githubusercontent.com/21301288/198954003-02ce1972-8f7f-4959-a349-5650d166f3ae.png">

#### Special notes for your reviewer:

/cc @halo-dev/sig-halo-console 

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


```release-note
添加 Codemirror 类型的 FormKit 输入框。
```

docs/custom-formkit-input/README.md

@@ -2,12 +2,16 @@
 
 ## 原由
 
-目前不管是在 Console 中，还是在插件 / 主题设置表单中，都有可能选择系统当中的资源，所以可以通过自定义 FormKit 组件的方式提供常用的选择器。
+目前在 Console 端的所有表单都使用了 FormKit，但 FormKit 内置的 Input 组件并不满足所有的需求，因此需要自定义一些 Input 组件。此外，为了插件和主题能够更加方便的使用系统内的一些数据，所以同样需要自定义一些带数据的选择组件。
 
 ## 使用方式
 
 目前已提供以下类型：
 
+- `code`: 代码编辑器
+  - 参数
+    1. language: 目前支持 `yaml`, `html`, `css`, `javascript`, `json`
+    2. height: 编辑器高度，如：`100px`
 - `menuCheckbox`：选择一组菜单
 - `menuRadio`：选择一个菜单
 - `menuItemSelect`：选择菜单项

src/formkit/formkit.config.ts

@@ -4,6 +4,7 @@ import { createAutoAnimatePlugin } from "@formkit/addons";
 import { zh } from "@formkit/i18n";
 import type { DefaultConfigOptions } from "@formkit/vue";
 import { form } from "./inputs/form";
+import { code } from "./inputs/code";
 import { menuCheckbox } from "./inputs/menu-checkbox";
 import { menuRadio } from "./inputs/menu-radio";
 import { menuItemSelect } from "./inputs/menu-item-select";
@@ -21,6 +22,7 @@ const config: DefaultConfigOptions = {
   plugins: [createAutoAnimatePlugin()],
   inputs: {
     form,
+    code,
     menuCheckbox,
     menuRadio,
     menuItemSelect,

src/formkit/inputs/code/CodeInput.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import type { FormKitFrameworkContext } from "@formkit/core";
+import { VCodemirror } from "@halo-dev/components";
+import type { PropType } from "vue";
+
+const props = defineProps({
+  context: {
+    type: Object as PropType<FormKitFrameworkContext>,
+    required: true,
+  },
+});
+
+const height = props.context.height as string;
+const language = props.context.language as string;
+
+const onChange = (value: string) => {
+  props.context.node.input(value);
+};
+</script>
+
+<template>
+  <VCodemirror
+    :model-value="props.context._value"
+    v-bind="context.attrs"
+    :height="height"
+    :language="language"
+    class="block w-full"
+    @change="onChange"
+  />
+</template>

src/formkit/inputs/code/index.ts

@@ -0,0 +1,8 @@
+import { createInput } from "@formkit/vue";
+import CodeInput from "./CodeInput.vue";
+
+export const code = createInput(CodeInput, {
+  type: "input",
+  props: ["height", "language"],
+  forceTypeProp: "textarea",
+});