feat: add codemirror component

Signed-off-by: Ryan Wang <i@ryanc.cc>

packages/components/package.json

@@ -61,5 +61,11 @@
       "import": "./dist/halo-components.es.js"
     },
     "./dist/style.css": "./dist/style.css"
+  },
+  "dependencies": {
+    "@codemirror/commands": "^6.0.1",
+    "@codemirror/state": "^6.1.0",
+    "@codemirror/view": "^6.1.0",
+    "codemirror": "^6.0.1"
   }
 }

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

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

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

@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+import type { PropType } from "vue";
+import { onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
+import type { EditorStateConfig } from "@codemirror/state";
+import { EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { basicSetup } from "codemirror";
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: "",
+  },
+  height: {
+    type: String,
+    default: "auto",
+  },
+  extensions: {
+    type: Array as PropType<EditorStateConfig["extensions"]>,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string): void;
+  (e: "change", value: string): void;
+}>();
+
+const customTheme = EditorView.theme({
+  "&": {
+    height: props.height,
+  },
+});
+
+const wrapper = shallowRef<HTMLDivElement>();
+const cmState = shallowRef<EditorState>();
+const cmView = shallowRef<EditorView>();
+
+const createCmEditor = () => {
+  let extensions = [
+    basicSetup,
+    EditorView.lineWrapping,
+    customTheme,
+    EditorView.updateListener.of((viewUpdate) => {
+      if (viewUpdate.docChanged) {
+        const doc = viewUpdate.state.doc.toString();
+        emit("update:modelValue", doc);
+        emit("change", doc);
+      }
+    }),
+  ];
+
+  if (props.extensions) {
+    extensions = extensions.concat(props.extensions);
+  }
+
+  cmState.value = EditorState.create({
+    doc: props.modelValue,
+    extensions,
+  });
+
+  cmView.value = new EditorView({
+    state: cmState.value,
+    parent: wrapper.value,
+  });
+};
+
+onMounted(() => {
+  createCmEditor();
+
+  // Update the codemirror editor doc when the model value changes.
+  watch(
+    () => props.modelValue,
+    (newValue) => {
+      if (newValue !== cmView.value?.state.doc.toString()) {
+        cmView.value?.dispatch({
+          changes: {
+            from: 0,
+            to: cmView.value?.state.doc.length,
+            insert: newValue,
+          },
+        });
+      }
+    }
+  );
+});
+
+// Destroy codemirror editor when component unmounts
+onBeforeUnmount(() => {
+  if (cmView.value) {
+    cmView.value.destroy();
+  }
+});
+</script>
+<template>
+  <div ref="wrapper" class="codemirror-wrapper contents"></div>
+</template>

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

@@ -0,0 +1,9 @@
+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();
+  });
+});

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

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

pnpm-lock.yaml

@@ -143,11 +143,20 @@ importers:
 
   packages/components:
     specifiers:
+      '@codemirror/commands': ^6.0.1
+      '@codemirror/state': ^6.1.0
+      '@codemirror/view': ^6.1.0
       '@iconify-json/ri': ^1.1.3
       '@rollup/plugin-typescript': ^8.3.3
+      codemirror: ^6.0.1
       histoire: ^0.7.9
       unplugin-icons: ^0.14.7
       vite-plugin-dts: ^1.3.1
+    dependencies:
+      '@codemirror/commands': 6.0.1
+      '@codemirror/state': 6.1.0
+      '@codemirror/view': 6.1.0
+      codemirror: 6.0.1
     devDependencies:
       '@iconify-json/ri': 1.1.3
       '@rollup/plugin-typescript': 8.3.3
@@ -1606,6 +1615,63 @@ packages:
       prettier: 1.19.1
     dev: true
 
+  /@codemirror/autocomplete/6.1.0:
+    resolution: {integrity: sha512-wtO4O5WDyXhhCd4q4utDIDZxnQfmJ++3dGBCG9LMtI79+92OcA1DVk/n7BEupKmjIr8AzvptDz7YQ9ud6OkU+A==}
+    dependencies:
+      '@codemirror/language': 6.2.1
+      '@codemirror/state': 6.1.0
+      '@codemirror/view': 6.1.0
+      '@lezer/common': 1.0.0
+    dev: false
+
+  /@codemirror/commands/6.0.1:
+    resolution: {integrity: sha512-iNHDByicYqQjs0Wo1MKGfqNbMYMyhS9WV6EwMVwsHXImlFemgEUC+c5X22bXKBStN3qnwg4fArNZM+gkv22baQ==}
+    dependencies:
+      '@codemirror/language': 6.2.1
+      '@codemirror/state': 6.1.0
+      '@codemirror/view': 6.1.0
+      '@lezer/common': 1.0.0
+    dev: false
+
+  /@codemirror/language/6.2.1:
+    resolution: {integrity: sha512-MC3svxuvIj0MRpFlGHxLS6vPyIdbTr2KKPEW46kCoCXw2ktb4NTkpkPBI/lSP/FoNXLCBJ0mrnUi1OoZxtpW1Q==}
+    dependencies:
+      '@codemirror/state': 6.1.0
+      '@codemirror/view': 6.1.0
+      '@lezer/common': 1.0.0
+      '@lezer/highlight': 1.0.0
+      '@lezer/lr': 1.2.0
+      style-mod: 4.0.0
+    dev: false
+
+  /@codemirror/lint/6.0.0:
+    resolution: {integrity: sha512-nUUXcJW1Xp54kNs+a1ToPLK8MadO0rMTnJB8Zk4Z8gBdrN0kqV7uvUraU/T2yqg+grDNR38Vmy/MrhQN/RgwiA==}
+    dependencies:
+      '@codemirror/state': 6.1.0
+      '@codemirror/view': 6.1.0
+      crelt: 1.0.5
+    dev: false
+
+  /@codemirror/search/6.0.0:
+    resolution: {integrity: sha512-rL0rd3AhI0TAsaJPUaEwC63KHLO7KL0Z/dYozXj6E7L3wNHRyx7RfE0/j5HsIf912EE5n2PCb4Vg0rGYmDv4UQ==}
+    dependencies:
+      '@codemirror/state': 6.1.0
+      '@codemirror/view': 6.1.0
+      crelt: 1.0.5
+    dev: false
+
+  /@codemirror/state/6.1.0:
+    resolution: {integrity: sha512-qbUr94DZTe6/V1VS7LDLz11rM/1t/nJxR1El4I6UaxDEdc0aZZvq6JCLJWiRmUf95NRAnDH6fhXn+PWp9wGCIg==}
+    dev: false
+
+  /@codemirror/view/6.1.0:
+    resolution: {integrity: sha512-T5QTuzwxbQ+KnZzz1ef3e3QCNH2qMdTmQhA4tbsK62lJGyCMZHSaSAJpFAr67c6Wl34IBgx2M7ue6WxJpWPOPg==}
+    dependencies:
+      '@codemirror/state': 6.1.0
+      style-mod: 4.0.0
+      w3c-keyname: 2.2.4
+    dev: false
+
   /@cypress/request/2.88.10:
     resolution: {integrity: sha512-Zp7F+R93N0yZyG34GutyTNr+okam7s/Fzc1+i3kcqOP8vk6OuajuE9qZJ6Rs+10/1JFtXFYMdyarnU1rZuJesg==}
     engines: {node: '>= 6'}
@@ -2138,6 +2204,22 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.11
     dev: true
 
+  /@lezer/common/1.0.0:
+    resolution: {integrity: sha512-ohydQe+Hb+w4oMDvXzs8uuJd2NoA3D8YDcLiuDsLqH+yflDTPEpgCsWI3/6rH5C3BAedtH1/R51dxENldQceEA==}
+    dev: false
+
+  /@lezer/highlight/1.0.0:
+    resolution: {integrity: sha512-nsCnNtim90UKsB5YxoX65v3GEIw3iCHw9RM2DtdgkiqAbKh9pCdvi8AWNwkYf10Lu6fxNhXPpkpHbW6mihhvJA==}
+    dependencies:
+      '@lezer/common': 1.0.0
+    dev: false
+
+  /@lezer/lr/1.2.0:
+    resolution: {integrity: sha512-TgEpfm9br2SX8JwtwKT8HsQZKuFkLRg6g+IRxObk9nVKQLKnkP3oMh+QGcTBL9GQsfQ2ADtKPbj2iGSMf3ytiA==}
+    dependencies:
+      '@lezer/common': 1.0.0
+    dev: false
+
   /@manypkg/find-root/1.1.0:
     resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
     dependencies:
@@ -3570,6 +3652,18 @@ packages:
       tslib: 2.3.1
     dev: true
 
+  /codemirror/6.0.1:
+    resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
+    dependencies:
+      '@codemirror/autocomplete': 6.1.0
+      '@codemirror/commands': 6.0.1
+      '@codemirror/language': 6.2.1
+      '@codemirror/lint': 6.0.0
+      '@codemirror/search': 6.0.0
+      '@codemirror/state': 6.1.0
+      '@codemirror/view': 6.1.0
+    dev: false
+
   /color-convert/1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -3688,6 +3782,10 @@ packages:
     resolution: {integrity: sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==}
     dev: true
 
+  /crelt/1.0.5:
+    resolution: {integrity: sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==}
+    dev: false
+
   /cross-spawn/5.1.0:
     resolution: {integrity: sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==}
     dependencies:
@@ -7239,6 +7337,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /style-mod/4.0.0:
+    resolution: {integrity: sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw==}
+    dev: false
+
   /supports-color/5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -8065,6 +8167,10 @@ packages:
       browser-process-hrtime: 1.0.0
     dev: true
 
+  /w3c-keyname/2.2.4:
+    resolution: {integrity: sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw==}
+    dev: false
+
   /w3c-xmlserializer/3.0.0:
     resolution: {integrity: sha512-3WFqGEgSXIyGhOmAFtlicJNMjEps8b1MG31NCA0/vOF9+nKMUW1ckhi9cnNHmf88Rzw5V+dwIwsm2C7X8k9aQg==}
     engines: {node: '>=12'}