### JavaScript and JSON Linting Example

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/docs/example/codeLint.md

This example demonstrates how to integrate and use code linting for JavaScript and JSON within the editor. It requires importing the necessary components and dynamically loading the example component.

```javascript
import { shallowRef } from "vue"

export default {
  data() {
    return {
      CaseContainer: null,
    }
  },

  mounted() {
    import('../demo/examples/lint/index.vue').then((module) => {
      this.CaseContainer = shallowRef(module.default)
    })

  }
}
```

--------------------------------

### Install CodeMirror Editor with pnpm

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/README.md

Install the codemirror-editor-vue3 package and codemirror using pnpm.

```bash
pnpm i codemirror-editor-vue3 codemirror@^5 -S
```

--------------------------------

### Install CodeMirror Editor with npm

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/README.md

Install the codemirror-editor-vue3 package and codemirror using npm.

```bash
npm install codemirror-editor-vue3 codemirror@^5 -S
```

--------------------------------

### Install CodeMirror Editor with yarn

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/README.md

Install the codemirror-editor-vue3 package and codemirror using yarn.

```bash
yarn add codemirror-editor-vue3 codemirror@">=5.64.0 <6"
```

--------------------------------

### Simple Log Mode Setup

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/docs/guide/prepattern/log.md

Configure the CodeMirror editor to use the 'log' mode. This mode highlights words starting with a capital letter in red by default and supports custom log formatting functions.

```vue
<template>
  <Codemirror v-model:value="code" :options="cmOptions" border :height="400" />
</template>

<script>
import { ref, defineComponent } from "vue";
import Codemirror, { createLinkMark, createLogMark, createTitle } from "codemirror-editor-vue3";

export default defineComponent({
  components: { Codemirror },
  setup() {
    const code = ref(`Complete log download address: ${createLinkMark({
      href: "/logDownload",
      download: "",
      target: "_blank",
    })}
${createTitle("You can mark the output type of each log row")}
${createLogMark("2021-08-26 15:07:09: job is success", "info")}
${createLogMark("2021-08-26 15:07:09: job is success", "warning")}
${createLogMark("2021-08-26 15:07:09: job is error", "error")}

====================Engine log====================

DataStreamMain start
java.lang.NullPointerException
at
at java.util.Properties.load0(Properties.java:353)
at java.util.Properties.load(Properties.java:341)
at com.zhiweicloud.dataprocess.util.common.PropertiesUtil.getStringByKey(PropertiesUtil.
at com.zhiweicloud.dataprocess.engine.FlinkEngine.readFlinkEngineConfig(FlinkEngine.
at com.zhiweicloud.dataprocess.engine.FlinkEngine.buildFlinkStream(FlinkEngine.
at com.zhiweicloud.dataprocess.engine.FlinkEngine.startFlinkEngine(FlinkEngine.
at com.zhiweicloud.dataprocess.DataStreamMain.main(DataStreamMain.
 `);
    const cmOptions = {
      mode: "log",
      theme: "default",
    };
    return {
      code,
      cmOptions,
    };
  },
});
</script>
```

--------------------------------

### Vue Component Setup with JavaScript

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/docs/guide/getting-started.md

Demonstrates how to set up the Codemirror component in a Vue 3 application using JavaScript. Includes basic configuration, event handlers, and lifecycle management.

```vue
<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    border
    ref="cmRef"
    height="400"
    width="600"
    @change="onChange"
    @input="onInput"
    @ready="onReady"
  >
  </Codemirror>
</template>
<script>
import { ref, onMounted, onUnmounted } from "vue";
import "codemirror/mode/javascript/javascript.js";
import Codemirror from "codemirror-editor-vue3";
export default {
  components: { Codemirror },
  setup() {
    const code = ref(
      `var i = 0;
for (; i < 9; i++) {
    console.log(i);
    // more statements
}
`
    );

    const cmRef = ref();
    const cmOptions = {
      mode: "text/javascript",
    };
    const onChange = (val, cm) => {
      console.log(val);
      console.log(cm.getValue());
    };

    const onInput = (val) => {
      console.log(val);
    };

    const onReady = (cm) => {
      console.log(cm.focus());
    };

    onMounted(() => {
      setTimeout(() => {
        cmRef.value?.refresh();
      }, 1000);

      setTimeout(() => {
        cmRef.value?.resize(300, 200);
      }, 2000);

      setTimeout(() => {
        cmRef.value?.cminstance.isClean();
      }, 3000);
    });

    onUnmounted(() => {
      cmRef.value?.destroy();
    });

    return {
      code,
      cmRef,
      cmOptions,
      onChange,
      onInput,
      onReady,
    };
  },
};
</script>
```

--------------------------------

### Vue Component Setup with TypeScript

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/docs/guide/getting-started.md

Shows how to integrate the Codemirror component in a Vue 3 application using TypeScript with the setup syntax. Includes type definitions for enhanced safety.

```vue
<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    border
    ref="cmRef"
    height="400"
    width="600"
    @change="onChange"
    @input="onInput"
    @ready="onReady"
  >
  </Codemirror>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from "vue";
import "codemirror/mode/javascript/javascript.js";
import Codemirror from "codemirror-editor-vue3";
import type { CmComponentRef } from "codemirror-editor-vue3";
import type { Editor, EditorConfiguration } from "codemirror";

const code = ref(
  `var i = 0;
for (; i < 9; i++) {
    console.log(i);
    // more statements
}
`
);
const cmRef = ref<CmComponentRef>();
const cmOptions: EditorConfiguration = {
  mode: "text/javascript",
};

const onChange = (val: string, cm: Editor) => {
  console.log(val);
  console.log(cm.getValue());
};

const onInput = (val: string) => {
  console.log(val);
};

const onReady = (cm: Editor) => {
  console.log(cm.focus());
};

onMounted(() => {
  setTimeout(() => {
    cmRef.value?.refresh();
  }, 1000);

  setTimeout(() => {
    cmRef.value?.resize(300, 200);
  }, 2000);

  setTimeout(() => {
    cmRef.value?.cminstance.isClean();
  }, 3000);
});

onUnmounted(() => {
  cmRef.value?.destroy();
});
</script>
```

--------------------------------

### Install @types/codemirror with pnpm

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/docs/guide/typescript/Support.md

Install the TypeScript type definitions for CodeMirror using pnpm. This is a development dependency.

```bash
pnpm i @types/codemirror -D
```

--------------------------------

### Install @types/codemirror with npm

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/docs/guide/typescript/Support.md

Install the TypeScript type definitions for CodeMirror using npm. This is a development dependency.

```bash
npm install @types/codemirror -D
```

--------------------------------

### Load Interactive Example Component

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/docs/example/index.md

Dynamically imports and loads an interactive example component using Vue 3's shallowRef and dynamic import. This is useful for on-demand loading of complex UI elements.

```javascript
import { shallowRef } from "vue"

export default {
  data() {
    return {
      CaseContainer: null,
    }
  },

  mounted() {
    import('../demo/examples/Interactive/index.vue').then((module) => {
      this.CaseContainer = shallowRef(module.default)
    })

  }
}
```

--------------------------------

### Install @types/codemirror with yarn

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/docs/guide/typescript/Support.md

Install the TypeScript type definitions for CodeMirror using yarn. This is a development dependency.

```bash
yarn add @types/codemirror
```

--------------------------------

### Accessing CodeMirror Default Properties

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/docs/guide/supplementary/static-properties.md

Demonstrates how to import and access the static `defaults` property from CodeMirror. This can be used to view or modify default editor configurations. Ensure you import CodeMirror correctly based on your setup.

```vue
<template>
  <Codemirror v-model:value="code" :options="cmOptions" border> </Codemirror>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import "codemirror/mode/javascript/javascript.js";
import Codemirror, { CodeMirror } from "codemirror-editor-vue3"; // [!code focus]
// or// [!code focus]
import _CodeMirror from "codemirror"; // [!code focus]
import type { Editor, EditorConfiguration } from "codemirror";

const code = ref(
  `const name = "peter"
console.log(name);`
);

const cmOptions: EditorConfiguration = {
  mode: "text/javascript",
};

console.log(CodeMirror.defaults); // [!code focus]
console.log(_CodeMirror.defaults); // [!code focus]
</script>
```

--------------------------------

### Custom Log Mode Setup

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/docs/guide/prepattern/log.md

Configure the CodeMirror editor to use the custom 'fclog' mode. This mode allows for custom log formatting with time nodes and output types using the `createLog` function.

```vue
<template>
  <Codemirror v-model:value="code" :options="cmOptions" border :height="400" />
  <a href=""></a>
</template>

<script>
import { ref, defineComponent } from "vue";
import Codemirror, { createLinkMark, createLogMark, createLog, createTitle } from "codemirror-editor-vue3";

export default defineComponent({
  components: { Codemirror },
  setup() {
    const code = ref(`Complete log download address: ${createLinkMark({
      href: "/logDownload",
      download: "",
      target: "_blank",
    })}

${createTitle("Logs with time nodes and output types")}
${createLog("info content", "info")}
${createLog("warning content", "warning")}
${createLog("error content", "error")}
`);
    const cmOptions = {
      mode: "fclog",
      theme: "default",
    };
    return {
      code,
      cmOptions,
    };
  },
});
</script>
```

--------------------------------

### Get Codemirror Instance via Component Ref

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/docs/guide/supplementary/instance.md

Access the Codemirror instance using a component ref within the Vue component's lifecycle. Ensure the component is mounted before attempting to access the instance.

```vue
<template>
  <Codemirror
    ref="cmComponentRef"
    v-model:value="code"
    :options="cmOptions"
    border
    :height="200"
  >
  </Codemirror>
</template>

<script lang="ts">
import { ref } from "vue";
import Codemirror, { CmComponentRef } from "codemirror-editor-vue3";
import type { Editor, EditorConfiguration } from "codemirror";

// language
import "codemirror/mode/javascript/javascript.js";

export default defineComponent({
  components: {
    Codemirror,
  },
  setup() {
    const code = ref(`const ary = []`);
    const cmComponentRef = ref<CmComponentRef>(null);
    const cminstance = ref<Editor>();

    const cmOptions: EditorConfiguration = {
      mode: "javascript",
    };

    onMounted(() =>{
      cminstance.value = cmComponentRef.value?.cminstance;
      cminstance.value?.focus();
    });

    // or
    nextTick(() =>{
      cminstance.value = cmComponentRef.value?.cminstance;
      cminstance.value?.focus();
    });

    return {
      cmComponentRef,
      code,
      cmOptions,
    };
  },
});
</script>
```

--------------------------------

### Get Codemirror Instance via Hook Functions

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/docs/guide/supplementary/instance.md

Obtain the Codemirror instance directly from 'ready' and 'change' hook functions provided by the component. This is useful for immediate access to the editor instance upon initialization or when content changes.

```vue
<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    border
    :height="200"
    @ready="onReady"
    @change="onChange"
  >
  </Codemirror>
</template>

<script lang="ts">
import { ref } from "vue";
import Codemirror from "codemirror-editor-vue3";
import type { Editor, EditorConfiguration } from "codemirror";

// language
import "codemirror/mode/javascript/javascript.js";

export default defineComponent({
  components: {
    Codemirror,
  },
  setup() {
    const code = ref(`const ary = []`);
    const cminstance = ref<Editor>();

    const cmOptions: EditorConfiguration = {
      mode: "javascript",
    };

    const onReady = (cm: Editor) =>{
      cminstance.value = cm;
      cminstance.value?.focus();
    };

    const onChange = (value: string, cm: Editor) =>{
      cminstance.value = cm;
      cminstance.value?.focus();
    };

    return {
      code,
      cmOptions,
      onReady,
      onChange,
    };
  },
});
</script>
```

--------------------------------

### Dynamic Component Loading in Vue3

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/docs/index.md

Demonstrates how to dynamically import and load a Vue component using `import()` and `shallowRef` in the `mounted` hook. This is useful for lazy loading components.

```javascript
import {shallowRef} from "vue"
export default {
  data() {
    return {
      dynamicComponent: null
    }
  },

  mounted() {
    import('./demo/home.vue').then((module) => {
      this.dynamicComponent = shallowRef(module.default)
    })
  }
}
```

--------------------------------

### Dynamic Component Loading in Vue

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/docs/guide/getting-started.md

Illustrates how to dynamically load a Vue component using `import()` and `shallowRef`. This is useful for lazy-loading components.

```vue
<script >
import {shallowRef} from "vue"
export default {
  data() {
    return {
      dynamicComponent: null
    }
  },

  mounted() {
    import('../demo/index.vue').then((module) => {
      this.dynamicComponent = shallowRef(module.default)
    })
  }
}
</script>
```

--------------------------------

### Vue Component Usage with Props and Events

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/README.md

Demonstrates how to use the Codemirror component in a Vue application, binding v-model, configuring options, setting basic props like border and height, and handling common Codemirror events.

```vue
<Codemirror
  v-model:value="code"
  :options="{ mode: 'text/x-vue', theme: 'default' }"
  border
  placeholder="test-placeholder"
  :height="200"
  @change="onChange"
  @blur="onBlur"
  @focus="onFocus"
  @scroll="onScroll"
/>
```

--------------------------------

### Handling Component Events

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/docs/guide/events.md

Use these event handlers to react to changes, input, and component readiness. Ensure the necessary imports are included.

```vue
<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    border
    @change="onChange"
    @input="onInput"
    @ready="onReady"
  >
  </Codemirror>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import "codemirror/mode/javascript/javascript.js";
import Codemirror from "codemirror-editor-vue3";
import type { Editor, EditorConfiguration } from "codemirror";

const code = ref('console.log("name")');

const cmOptions: EditorConfiguration = {
  mode: "text/javascript",
  lint: true,
};

const onChange = (val: string, cm: Editor) => {
  console.log(val);
  console.log(cm.getValue());
};

const onInput = (val: string) => {
  console.log(val);
};

const onReady = (cm: Editor) => {
  console.log(cm.focus());
};
</script>

```

--------------------------------

### Register global component with custom name

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/docs/guide/getting-started.md

Register the CodeMirror component globally with a custom name in main.js.

```js
// ....
app.use(InstallCodeMirror, { componentName: "customName" }); // [!code ++]
```

--------------------------------

### Importing Log Component

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/docs/guide/prepattern/log.md

Imports the default log component and the fclog component asynchronously. This is typically used in the mounted lifecycle hook of a Vue component.

```javascript
import { shallowRef } from "vue"

export default {
  data() {
    return {
      log: null,
      fcLog:null
    }
  },

  mounted() {
    import('../../demo/log/index.vue').then((module) => {
      this.log = shallowRef(module.default)
    })
    import('../../demo/log/fclog.vue').then((module) => {
      this.fcLog = shallowRef(module.default)
    })
  }
}
```

--------------------------------

### Configure JavaScript Language Mode

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/docs/guide/lang.md

This snippet shows how to set up the CodeMirror editor to support JavaScript syntax highlighting. Ensure the 'codemirror/mode/javascript/javascript.js' module is imported.

```vue
<template>
  <Codemirror v-model:value="code" :options="cmOptions" border ref="cmRef" height="400" width="600" @change="onChange">
  </Codemirror>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import Codemirror from "codemirror-editor-vue3";
import "codemirror/mode/javascript/javascript.js";
const code = ref(
  `var i = 0;
for (; i < 9; i++) {
    console.log(i);
    // more statements
}`
);

const cmRef = ref();
const cmOptions = {
  mode: "text/javascript",
};
const onChange = (val, cm) => {
  console.log(val);
  console.log(cm.getValue());
};

onUnmounted(() => {
  cmRef.value?.destroy();
});
</script>
```

--------------------------------

### Set Custom Theme Name

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/docs/guide/supplementary/custom-theme.md

Use the `setOption` method within the `onReady` callback to apply a custom theme to the CodeMirror editor. The theme name must correspond to a CSS class name.

```typescript
onReady(cm: Editor) {
  cm.setOption("theme", "your-theme-name");
}
```

--------------------------------

### Vue Component with Custom Theme

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/docs/guide/supplementary/custom-theme.md

This Vue component demonstrates how to integrate CodeMirror editor and apply a custom theme by setting the theme option in the 'onReady' event. It also includes the CSS for the 'ctp-mocha' theme.

```vue
<template>
  <div class="h-500px w-300px">
    <Codemirror
      originalStyle
      :options="cmOptions"
      class="cm-component"
      @ready="onReady"
      @scroll="onScroll"
      v-model:value="code"
      :border="true"
    />
  </div>
</template>

<script lang="ts">
import { ref, defineComponent } from "vue";
import { Editor } from "codemirror";
import Codemirror from "codemirror-editor-vue3";
// language
import "codemirror/mode/javascript/javascript.js";
import "codemirror/addon/selection/active-line";

export default defineComponent({
  components: {
    Codemirror,
  },
  setup() {
    const code = ref(`function findSequence(goal) {
      function find(start, history) {
        if (start == goal)
          return history;
        else if (start > goal)
          return null;
        else
          return find(start + 5, "(" + history + " + 5)") ||
                 find(start * 3, "(" + history + " * 3)");
      }
      return find(1, "1");
    }`);

    return {
      code,
      cmOptions: {
        mode: "javascript",
        lineNumbers: true,
        highlightDifferences: true,
        lineWiseCopyCut: true,
        styleActiveLine: true,
      },
      onReady(cm: Editor) {
        cm.setOption("theme", "ctp-mocha");
      },
      onScroll(cm: any) {
        console.log(cm);
      },
    };
  },
});
</script>

<style>
/* Define theme variables */
div.cm-s-ctp-mocha.CodeMirror {
  --bg0: #1e1e2e;
  --bg1: #7f849c;
  --bg4: #6c7086;
  --fg: #cdd6f4;
  --fg3: #a6adc8;
  --gray: #bac2de;
  --blue: #89b4fa;
  --yellow: #f9e2af;
  --aqua: #89b4fa;
  --orange: #fab387;
  --primary-bg: #1e1e2e;
  --current-line: #313244;
  --selection: #585b70;
  --atom: #b4befe;
  --cursor: #7f849c;
  --keyword: #f38ba8;
  --operator: #89dceb;
  --number: #fab387;
  --definition: #89b4fa;
  --string: #a6e3a1;
}

/* Base styles */
.cm-s-ctp-mocha.CodeMirror,
.cm-s-ctp-mocha .CodeMirror-gutters {
  background-color: var(--primary-bg);
  color: var(--fg3);
}

/* Line number styles */
.cm-s-ctp-mocha .CodeMirror-gutters {
  background: var(--primary-bg);
  border-right: 0px;
}
.cm-s-ctp-mocha .CodeMirror-linenumber {
  color: var(--bg4);
}

/* Cursor styles */
.cm-s-ctp-mocha .CodeMirror-cursor {
  border-left: 1px solid var(--fg);
}
.cm-s-ctp-mocha.cm-fat-cursor .CodeMirror-cursor {
  background-color: var(--cursor) !important;
}
.cm-s-ctp-mocha .cm-animate-fat-cursor {
  background-color: var(--cursor) !important;
}

/* Selected text styles */
.cm-s-ctp-mocha div.CodeMirror-selected {
  background: var(--selection);
}

/* Syntax highlighting styles */
.cm-s-ctp-mocha span.cm-meta {
  color: var(--blue);
}
.cm-s-ctp-mocha span.cm-comment {
  color: var(--gray);
}
.cm-s-ctp-mocha span.cm-number {
  color: var(--number);
}
.cm-s-ctp-mocha span.cm-atom {
  color: var(--atom);
}
.cm-s-ctp-mocha span.cm-keyword {
  color: var(--keyword);
}
.cm-s-ctp-mocha span.cm-variable {
  color: var(--fg);
}
.cm-s-ctp-mocha span.cm-variable-2 {
  color: var(--fg);
}
.cm-s-ctp-mocha span.cm-variable-3,
.cm-s-ctp-mocha .cm-s-gruvbox-dark span.cm-type {
  color: var(--yellow);
}
.cm-s-ctp-mocha span.cm-operator {
  color: var(--operator);
}
.cm-s-ctp-mocha span.cm-callee {
  color: var(--fg);
}
.cm-s-ctp-mocha span.cm-def {
  color: var(--definition);
}
.cm-s-ctp-mocha span.cm-property {
  color: var(--fg);
}
.cm-s-ctp-mocha span.cm-string {
  color: var(--string);
}
.cm-s-ctp-mocha span.cm-string-2 {
  color: var(--aqua);
}
.cm-s-ctp-mocha span.cm-qualifier {
  color: var(--aqua);
}
.cm-s-ctp-mocha span.cm-attribute {
  color: var(--aqua);
}

/* Current line highlight */
.cm-s-ctp-mocha .CodeMirror-activeline-background {
  background: var(--current-line);
}

/* Matching bracket styles */
.cm-s-ctp-mocha .CodeMirror-matchingbracket {
  background: var(--gray);
  color: var(--bg0) !important;
}

/* Built-in functions and tag styles */
.cm-s-ctp-mocha span.cm-builtin {
  color: var(--orange);
}
.cm-s-ctp-mocha span.cm-tag {
  color: var(--orange);
}
</style>
```

--------------------------------

### Customize Global CodeMirror Component Name

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/README.md

Customize the component name when globally registering CodeMirror.

```javascript
app.use(InstallCodeMirror, { componentName: "customName" });
```

--------------------------------

### Register CodeMirror Globally in main.js

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/README.md

Globally register the CodeMirror component in your Vue 3 application's main entry file.

```javascript
import { createApp } from "vue";
import App from "./App.vue";
import { InstallCodeMirror } from "codemirror-editor-vue3";

const app = createApp(App);
app.use(InstallCodeMirror);
app.mount("#app");
```

--------------------------------

### Vue Component for Merge Mode

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/docs/guide/prepattern/merge.md

This Vue component demonstrates how to integrate CodeMirror's merge mode. It requires importing the necessary modes and setting up the options for comparing two code versions. The `MergeView` and `Editor` types are used for type safety.

```vue
<template>
  <Codemirror merge :options="cmOptions" :height="400" @change="onChange" />
</template>

<script lang="ts">
import { ref, defineComponent, reactive } from "vue";
import { MergeView } from "codemirror/addon/merge/merge";
import type { Editor } from "codemirror";

import Codemirror from "codemirror-editor-vue3";

import "codemirror/mode/htmlmixed/htmlmixed.js";

export default defineComponent({
  components: {
    Codemirror,
  },
  setup() {
    const code = ref(`<head>
  <title>codemirror-editor-vue</title>
  <meta data-n-head="ssr" charset="utf-8">
</head>`);

    const orig2 = ref(`<head>
  <title>test title</title>
  <meta data-n-head="ssr" charset="utf-8">
</head>`);

    return {
      onChange(val: string, cm: any) {
        console.log(val);
        const cmMerge = cm as MergeView;
        const cminstance: Editor = cmMerge.editor();
        console.log(cminstance.getValue());
      },
      cmOptions: reactive({
        value: code,
        origLeft: null,
        orig: orig2,
        connect: "align",
        mode: "text/html",
        lineNumbers: true,
        collapseIdentical: false,
        highlightDifferences: true,
      }),
    };
  },
});
</script>
```

--------------------------------

### Vue 3 Component with TypeScript and CodeMirror

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/docs/guide/typescript/Support.md

A Vue 3 component demonstrating the integration of codemirror-editor-vue3 with TypeScript. It includes basic configuration and event handling.

```vue
<template>
  <Codemirror v-model:value="code" :options="cmOptions" border @change="onChange" @ready="onReady" @focus="onFocus">
  </Codemirror>
</template>

<script lang="ts">
import { ref } from "vue";
import Codemirror from "codemirror-editor-vue3";

// language
import "codemirror/mode/javascript/javascript.js";

// @types/codemirror
import type { Editor, EditorConfiguration } from "codemirror";

export default defineComponent({
  components: {
    Codemirror,
  },
  setup() {
    const cminstance = ref<Editor>();
    const code = ref(`const ary = []`);

    const cmOptions: EditorConfiguration = {
      mode: "javascript",
      lineWrapping: true,
    };

    return {
      code,
      cmOptions,
      onReady(cm: Editor) {
        cminstance.value = cm;
      },
      onChange(value: string, cm: Editor) {
        console.log(value, cm);
      },
      onFocus(cm: Editor, event: FocusEvent) {
        console.log("onFocus", cm, event);
        cm.getDoc().on("beforeChange", (instance: Doc, obj: EditorChange) => {
          console.log("beforeChange", instance, obj);
        });
      },
    };
  },
});
</script>
```

--------------------------------

### Binding Codemirror Native Events

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/docs/guide/events.md

You can bind directly to Codemirror's official events using the component. Refer to the Codemirror documentation for a full list of available events.

```vue
<Codemirror
  v-model:value="code"
  :options="{ mode: 'text/x-vue', theme: 'default' }"
  border
  placeholder="test-placeholder"
  :height="200"
  @change="onChange"
  @blur="onBlur"
  @focus="onFocus"
  @scroll="onScroll"
/>

```

--------------------------------

### Handling Change Event in Merge Mode

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/docs/guide/events.md

The 'change' event behaves differently in merge mode. This snippet shows how to access the underlying Codemirror instance and its value.

```vue
<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    border
    @change="onChange"
  >
  </Codemirror>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { Editor, EditorConfiguration } from "codemirror";
import { MergeView } from "codemirror/addon/merge/merge";
import "codemirror/mode/javascript/javascript.js";
import Codemirror from "codemirror-editor-vue3";

const code = ref('console.log("name")');

const cmOptions: EditorConfiguration = {
  mode: "text/javascript",
  lint: true,
};

const onChange = (val: string, cm: any) => {
  console.log(val);
  const cmMerge = cm as MergeView;
  const cminstance: Editor = cmMerge.editor();
  console.log(cminstance.getValue());
};

// ...
</script>

```

--------------------------------

### Use CodeMirror Component in a Vue Component

Source: https://github.com/rennzhang/codemirror-editor-vue3/blob/main/README.md

Integrate the CodeMirror component within a Vue 3 component's template and script.

```vue
<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    border
    placeholder="test placeholder"
    :height="200"
    @change="change"
  />
</template>

<script>
import Codemirror from "codemirror-editor-vue3";

// placeholder
import "codemirror/addon/display/placeholder.js";

// language
import "codemirror/mode/javascript/javascript.js";
// placeholder
import "codemirror/addon/display/placeholder.js";
// theme
import "codemirror/theme/dracula.css";

import { ref } from "vue";
export default {
  components: { Codemirror },
  setup() {
    const code = ref(`
var i = 0;
for (; i < 9; i++) {
  console.log(i);
  // more statements
}`);

    return {
      code,
      cmOptions: {
        mode: "text/javascript", // Language mode
        theme: "dracula", // Theme
      },
    };
  },
};
</script>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.