vitest/packages/ui/client/components/CodeMirror.vue

<script setup lang="ts">
import type CodeMirror from "codemirror";

const { mode, readOnly } = defineProps<{
  mode?: string;
  readOnly?: boolean;
}>();

const emit = defineEmits<{
  (event: "save", content: string): void;
}>();

const modelValue = defineModel<string>();

const attrs = useAttrs();

const modeMap: Record<string, any> = {
  // html: 'htmlmixed',
  // vue: 'htmlmixed',
  // svelte: 'htmlmixed',
  js: "javascript",
  mjs: "javascript",
  cjs: "javascript",
  ts: { name: "javascript", typescript: true },
  mts: { name: "javascript", typescript: true },
  cts: { name: "javascript", typescript: true },
  jsx: { name: "javascript", jsx: true },
  tsx: { name: "javascript", typescript: true, jsx: true },
};

const el = ref<HTMLTextAreaElement>();

const cm = shallowRef<CodeMirror.EditorFromTextArea>();

defineExpose({ cm });

onMounted(async () => {
  cm.value = useCodeMirror(el, modelValue as unknown as Ref<string>, {
    ...attrs,
    mode: modeMap[mode || ""] || mode,
    readOnly: readOnly ? true : undefined,
    extraKeys: {
      "Cmd-S": function (cm) {
        emit("save", cm.getValue());
      },
      "Ctrl-S": function (cm) {
        emit("save", cm.getValue());
      },
    },
  });
  cm.value.setSize("100%", "100%");
  cm.value.clearHistory();
  setTimeout(() => cm.value!.refresh(), 100);
});
</script>

<template>
  <div relative font-mono text-sm class="codemirror-scrolls">
    <textarea ref="el" />
  </div>
</template>