From 2de0b1f505976f4ad5efbfc7b1db2b506f0507d8 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 1 Nov 2022 10:56:16 +0800
Subject: [PATCH] feat: add formkit custom input of codemirror (#672)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### 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   |  6 +++++-
 src/formkit/formkit.config.ts         |  2 ++
 src/formkit/inputs/code/CodeInput.vue | 30 +++++++++++++++++++++++++++
 src/formkit/inputs/code/index.ts      |  8 +++++++
 4 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 src/formkit/inputs/code/CodeInput.vue
 create mode 100644 src/formkit/inputs/code/index.ts

diff --git a/docs/custom-formkit-input/README.md b/docs/custom-formkit-input/README.md
index b5cc4958..60631d87 100644
--- a/docs/custom-formkit-input/README.md
+++ b/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`：选择菜单项
diff --git a/src/formkit/formkit.config.ts b/src/formkit/formkit.config.ts
index e98f40bb..2c0fc28e 100644
--- a/src/formkit/formkit.config.ts
+++ b/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,
diff --git a/src/formkit/inputs/code/CodeInput.vue b/src/formkit/inputs/code/CodeInput.vue
new file mode 100644
index 00000000..40a6eca4
--- /dev/null
+++ b/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>
diff --git a/src/formkit/inputs/code/index.ts b/src/formkit/inputs/code/index.ts
new file mode 100644
index 00000000..f42ccb9f
--- /dev/null
+++ b/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",
+});