-
Notifications
You must be signed in to change notification settings - Fork 52
/
Copy pathmerge.html
75 lines (73 loc) · 34.8 KB
/
merge.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Merge Mode | codemirror-editor-vue3</title>
<meta name="description" content="CodeMirror component for Vue3">
<meta name="generator" content="VitePress v1.3.4">
<link rel="preload stylesheet" href="/codemirror-editor-vue3/assets/style.Bj7jxojE.css" as="style">
<script type="module" src="/codemirror-editor-vue3/assets/app.D3HtlWVD.js"></script>
<link rel="preload" href="/codemirror-editor-vue3/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/codemirror-editor-vue3/assets/chunks/theme.j40n8qMy.js">
<link rel="modulepreload" href="/codemirror-editor-vue3/assets/chunks/framework.ZlHgrsSq.js">
<link rel="modulepreload" href="/codemirror-editor-vue3/assets/chunks/mergeDemo.NuhFmIaN.js">
<link rel="modulepreload" href="/codemirror-editor-vue3/assets/guide_prepattern_merge.md.DjisKf2c.lean.js">
<link rel="icon" href="https://codemirror.net/favicon.ico">
<meta name="theme-color" content="#3c8772">
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
</head>
<body>
<div id="app"><div class="Layout" data-v-e982f6a3><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0b25cd75></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0b25cd75> Skip to content </a><!--]--><!----><header class="VPNav" data-v-e982f6a3 data-v-c0a4fa2a><div class="VPNavBar" data-v-c0a4fa2a data-v-bacd9433><div class="wrapper" data-v-bacd9433><div class="container" data-v-bacd9433><div class="title" data-v-bacd9433><div class="VPNavBarTitle has-sidebar" data-v-bacd9433 data-v-7cff3a72><a class="title" href="/codemirror-editor-vue3/" data-v-7cff3a72><!--[--><!--]--><!----><span data-v-7cff3a72>codemirror-editor-vue3</span><!--[--><!--]--></a></div></div><div class="content" data-v-bacd9433><div class="content-body" data-v-bacd9433><!--[--><!--]--><div class="VPNavBarSearch search" data-v-bacd9433><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-bacd9433 data-v-7f735db6><span id="main-nav-aria-label" class="visually-hidden" data-v-7f735db6> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/codemirror-editor-vue3/guide/getting-started" tabindex="0" data-v-7f735db6 data-v-a9c47a1d><!--[--><span data-v-a9c47a1d>Guide</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/codemirror-editor-vue3/example/index" tabindex="0" data-v-7f735db6 data-v-a9c47a1d><!--[--><span data-v-a9c47a1d>More Example</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://github.com/RennCheung/codemirror-editor-vue3/blob/main/CHANGELOG.md" target="_blank" rel="noreferrer" tabindex="0" data-v-7f735db6 data-v-a9c47a1d><!--[--><span data-v-a9c47a1d>Changelog</span><!--]--></a><!--]--><!--]--></nav><div class="VPFlyout VPNavBarTranslations translations" data-v-bacd9433 data-v-7337769a data-v-26a56a15><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="Change language" data-v-26a56a15><span class="text" data-v-26a56a15><span class="vpi-languages option-icon" data-v-26a56a15></span><!----><span class="vpi-chevron-down text-icon" data-v-26a56a15></span></span></button><div class="menu" data-v-26a56a15><div class="VPMenu" data-v-26a56a15 data-v-32c7261e><!----><!--[--><!--[--><div class="items" data-v-7337769a><p class="title" data-v-7337769a>English</p><!--[--><div class="VPMenuLink" data-v-7337769a data-v-8ff69df3><a class="VPLink link" href="/codemirror-editor-vue3/zh-CN/guide/prepattern/merge" data-v-8ff69df3><!--[-->简体中文<!--]--></a></div><!--]--></div><!--]--><!--]--></div></div></div><div class="VPNavBarAppearance appearance" data-v-bacd9433 data-v-8541eb4d><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-8541eb4d data-v-f370275a data-v-9af04a62><span class="check" data-v-9af04a62><span class="icon" data-v-9af04a62><!--[--><span class="vpi-sun sun" data-v-f370275a></span><span class="vpi-moon moon" data-v-f370275a></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-bacd9433 data-v-feffdeef data-v-718b0c02><!--[--><a class="VPSocialLink no-icon" href="https://github.com/RennCheung/codemirror-editor-vue3" aria-label="github" target="_blank" rel="noopener" data-v-718b0c02 data-v-360d0037><span class="vpi-social-github" /></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-bacd9433 data-v-f7312497 data-v-26a56a15><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-26a56a15><span class="vpi-more-horizontal icon" data-v-26a56a15></span></button><div class="menu" data-v-26a56a15><div class="VPMenu" data-v-26a56a15 data-v-32c7261e><!----><!--[--><!--[--><div class="group translations" data-v-f7312497><p class="trans-title" data-v-f7312497>English</p><!--[--><div class="VPMenuLink" data-v-f7312497 data-v-8ff69df3><a class="VPLink link" href="/codemirror-editor-vue3/zh-CN/guide/prepattern/merge" data-v-8ff69df3><!--[-->简体中文<!--]--></a></div><!--]--></div><div class="group" data-v-f7312497><div class="item appearance" data-v-f7312497><p class="label" data-v-f7312497>Appearance</p><div class="appearance-action" data-v-f7312497><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-f7312497 data-v-f370275a data-v-9af04a62><span class="check" data-v-9af04a62><span class="icon" data-v-9af04a62><!--[--><span class="vpi-sun sun" data-v-f370275a></span><span class="vpi-moon moon" data-v-f370275a></span><!--]--></span></span></button></div></div></div><div class="group" data-v-f7312497><div class="item social-links" data-v-f7312497><div class="VPSocialLinks social-links-list" data-v-f7312497 data-v-718b0c02><!--[--><a class="VPSocialLink no-icon" href="https://github.com/RennCheung/codemirror-editor-vue3" aria-label="github" target="_blank" rel="noopener" data-v-718b0c02 data-v-360d0037><span class="vpi-social-github" /></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-bacd9433 data-v-a1aa6413><span class="container" data-v-a1aa6413><span class="top" data-v-a1aa6413></span><span class="middle" data-v-a1aa6413></span><span class="bottom" data-v-a1aa6413></span></span></button></div></div></div></div><div class="divider" data-v-bacd9433><div class="divider-line" data-v-bacd9433></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-e982f6a3 data-v-42cf8152><div class="container" data-v-42cf8152><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-42cf8152><span class="vpi-align-left menu-icon" data-v-42cf8152></span><span class="menu-text" data-v-42cf8152>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-42cf8152 data-v-cbc1db0d><button data-v-cbc1db0d>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-e982f6a3 data-v-1915cdad><div class="curtain" data-v-1915cdad></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-1915cdad><span class="visually-hidden" id="sidebar-aria-label" data-v-1915cdad> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-89d1e89b><section class="VPSidebarItem level-0 collapsible" data-v-89d1e89b data-v-02479207><div class="item" role="button" tabindex="0" data-v-02479207><div class="indicator" data-v-02479207></div><h2 class="text" data-v-02479207>Introduction</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-02479207><span class="vpi-chevron-right caret-icon" data-v-02479207></span></div></div><div class="items" data-v-02479207><!--[--><div class="VPSidebarItem level-1 is-link" data-v-02479207 data-v-02479207><div class="item" data-v-02479207><div class="indicator" data-v-02479207></div><a class="VPLink link link" href="/codemirror-editor-vue3/guide/getting-started" data-v-02479207><!--[--><p class="text" data-v-02479207>Getting Started</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-02479207 data-v-02479207><div class="item" data-v-02479207><div class="indicator" data-v-02479207></div><a class="VPLink link link" href="/codemirror-editor-vue3/guide/props" data-v-02479207><!--[--><p class="text" data-v-02479207>Component Props</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-02479207 data-v-02479207><div class="item" data-v-02479207><div class="indicator" data-v-02479207></div><a class="VPLink link link" href="/codemirror-editor-vue3/guide/events" data-v-02479207><!--[--><p class="text" data-v-02479207>Component Events</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-02479207 data-v-02479207><div class="item" data-v-02479207><div class="indicator" data-v-02479207></div><a class="VPLink link link" href="/codemirror-editor-vue3/guide/lang" data-v-02479207><!--[--><p class="text" data-v-02479207>Language Modes</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-89d1e89b><section class="VPSidebarItem level-0 has-active" data-v-89d1e89b data-v-02479207><div class="item" role="button" tabindex="0" data-v-02479207><div class="indicator" data-v-02479207></div><h2 class="text" data-v-02479207>prepattern</h2><!----></div><div class="items" data-v-02479207><!--[--><div class="VPSidebarItem level-1 is-link" data-v-02479207 data-v-02479207><div class="item" data-v-02479207><div class="indicator" data-v-02479207></div><a class="VPLink link link" href="/codemirror-editor-vue3/guide/prepattern/merge" data-v-02479207><!--[--><p class="text" data-v-02479207>merge(diff) mode</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-02479207 data-v-02479207><div class="item" data-v-02479207><div class="indicator" data-v-02479207></div><a class="VPLink link link" href="/codemirror-editor-vue3/guide/prepattern/log" data-v-02479207><!--[--><p class="text" data-v-02479207>log mode</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-89d1e89b><section class="VPSidebarItem level-0" data-v-89d1e89b data-v-02479207><div class="item" role="button" tabindex="0" data-v-02479207><div class="indicator" data-v-02479207></div><h2 class="text" data-v-02479207>Supplementary Instruction</h2><!----></div><div class="items" data-v-02479207><!--[--><div class="VPSidebarItem level-1 is-link" data-v-02479207 data-v-02479207><div class="item" data-v-02479207><div class="indicator" data-v-02479207></div><a class="VPLink link link" href="/codemirror-editor-vue3/guide/supplementary/static-properties" data-v-02479207><!--[--><p class="text" data-v-02479207>CodeMirror Static properties</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-02479207 data-v-02479207><div class="item" data-v-02479207><div class="indicator" data-v-02479207></div><a class="VPLink link link" href="/codemirror-editor-vue3/guide/supplementary/instance" data-v-02479207><!--[--><p class="text" data-v-02479207>Get instance object</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-02479207 data-v-02479207><div class="item" data-v-02479207><div class="indicator" data-v-02479207></div><a class="VPLink link link" href="/codemirror-editor-vue3/guide/supplementary/custom-theme" data-v-02479207><!--[--><p class="text" data-v-02479207>Custom Theme</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-89d1e89b><section class="VPSidebarItem level-0" data-v-89d1e89b data-v-02479207><!----><div class="items" data-v-02479207><!--[--><div class="VPSidebarItem level-1 is-link" data-v-02479207 data-v-02479207><div class="item" data-v-02479207><div class="indicator" data-v-02479207></div><a class="VPLink link link" href="/codemirror-editor-vue3/guide/typescript/Support" data-v-02479207><!--[--><p class="text" data-v-02479207>Typescript Support</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-e982f6a3 data-v-584663e0><div class="VPDoc has-sidebar has-aside" data-v-584663e0 data-v-96f874fa><!--[--><!--]--><div class="container" data-v-96f874fa><div class="aside" data-v-96f874fa><div class="aside-curtain" data-v-96f874fa></div><div class="aside-container" data-v-96f874fa><div class="aside-content" data-v-96f874fa><div class="VPDocAside" data-v-96f874fa data-v-007beb09><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-007beb09 data-v-21189dcd><div class="content" data-v-21189dcd><div class="outline-marker" data-v-21189dcd></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-21189dcd>On this page</div><ul class="VPDocOutlineItem root" data-v-21189dcd data-v-2c5f7d93><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-007beb09></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-96f874fa><div class="content-container" data-v-96f874fa><!--[--><!--]--><main class="main" data-v-96f874fa><div style="position:relative;" class="vp-doc _codemirror-editor-vue3_guide_prepattern_merge" data-v-96f874fa><div><h1 id="merge-mode" tabindex="-1">Merge Mode <a class="header-anchor" href="#merge-mode" aria-label="Permalink to "Merge Mode""></a></h1><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>merge pattern-related dependencies are already introduced within the component; you only need to import the language pattern and style files that you need to use.</p></div><h2 id="introduce" tabindex="-1">introduce <a class="header-anchor" href="#introduce" aria-label="Permalink to "introduce""></a></h2><p>The merge mode works with the <a href="https://github.com/JackuB/diff-match-patch" target="_blank" rel="noreferrer">diff-match-patch</a> plug-in(Only 6.3k after compression), For better out-of-the-box, this dependency is automatically introduced when you install <code>codemirror-editor-vue3</code>.</p><!----><details class="details custom-block"><summary>Click to view the code</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">Codemirror</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> merge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">cmOptions</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">400</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">change</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">onChange</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"ts"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref, defineComponent, reactive } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "vue"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { MergeView } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "codemirror/addon/merge/merge"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Editor } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "codemirror"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Codemirror </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "codemirror-editor-vue3"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "codemirror/mode/htmlmixed/htmlmixed.js"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> defineComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> components: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Codemirror,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> code</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`<head></span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> <title>codemirror-editor-vue</title></span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> <meta data-n-head="ssr" charset="utf-8"></span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"></head>`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> orig2</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`<head></span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> <title>test title</title></span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> <meta data-n-head="ssr" charset="utf-8"></span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"></head>`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onChange</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">val</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">cm</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(val);</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> cmMerge</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> cm </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">as</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MergeView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> cminstance</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Editor</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> cmMerge.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(cminstance.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">());</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> cmOptions: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">reactive</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> value: code,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> origLeft: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">null</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> orig: orig2,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> connect: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"align"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> mode: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text/html"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> lineNumbers: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> collapseIdentical: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> highlightDifferences: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> };</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div></details></div></div></main><footer class="VPDocFooter" data-v-96f874fa data-v-79f34c3f><!--[--><!--]--><div class="edit-info" data-v-79f34c3f><div class="edit-link" data-v-79f34c3f><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/RennCheung/codemirror-editor-vue3/edit/main/docs/guide/prepattern/merge.md" target="_blank" rel="noreferrer" data-v-79f34c3f><!--[--><span class="vpi-square-pen edit-link-icon" data-v-79f34c3f></span> Edit this page on GitHub<!--]--></a></div><div class="last-updated" data-v-79f34c3f><p class="VPLastUpdated" data-v-79f34c3f data-v-c77621c1>Last update time: <time datetime="2024-09-20T03:08:21.000Z" data-v-c77621c1></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-79f34c3f><span class="visually-hidden" id="doc-footer-aria-label" data-v-79f34c3f>Pager</span><div class="pager" data-v-79f34c3f><a class="VPLink link pager-link prev" href="/codemirror-editor-vue3/guide/lang" data-v-79f34c3f><!--[--><span class="desc" data-v-79f34c3f>Previous page</span><span class="title" data-v-79f34c3f>Language Modes</span><!--]--></a></div><div class="pager" data-v-79f34c3f><a class="VPLink link pager-link next" href="/codemirror-editor-vue3/guide/prepattern/log" data-v-79f34c3f><!--[--><span class="desc" data-v-79f34c3f>Next page</span><span class="title" data-v-79f34c3f>log mode</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-e982f6a3 data-v-110aba68><div class="container" data-v-110aba68><p class="message" data-v-110aba68>Released under the MIT License.</p><p class="copyright" data-v-110aba68>Copyright © 2021-present Renn Cheung</p></div></footer><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"example_codelint.md\":\"CFvNAJda\",\"example_index.md\":\"3y151YnW\",\"guide_events.md\":\"smGhW-_3\",\"guide_getting-started.md\":\"Bu2atFgH\",\"guide_lang.md\":\"SN2qlEGe\",\"guide_prepattern_log.md\":\"Bk30YWKF\",\"guide_prepattern_merge.md\":\"DjisKf2c\",\"guide_props.md\":\"UpMIGzcn\",\"guide_supplementary_custom-theme.md\":\"iACg94us\",\"guide_supplementary_instance.md\":\"DKs0wqOA\",\"guide_supplementary_static-properties.md\":\"BwOb5POz\",\"guide_typescript_support.md\":\"U4sY84RK\",\"index.md\":\"DRILhZKi\",\"zh-cn_example_codelint.md\":\"BygKS39Z\",\"zh-cn_example_index.md\":\"n6V9a6vX\",\"zh-cn_guide_events.md\":\"DT-XZUbH\",\"zh-cn_guide_getting-started.md\":\"Bs8XL2He\",\"zh-cn_guide_lang.md\":\"Dtx_XarC\",\"zh-cn_guide_prepattern_log.md\":\"BqhxalmT\",\"zh-cn_guide_prepattern_merge.md\":\"C5DuhRr2\",\"zh-cn_guide_props.md\":\"BKAok87n\",\"zh-cn_guide_supplementary_custom-theme.md\":\"foeqPmdC\",\"zh-cn_guide_supplementary_instance.md\":\"D-VE--qK\",\"zh-cn_guide_supplementary_static-properties.md\":\"Dh64pda9\",\"zh-cn_guide_typescript_support.md\":\"Drws9rJq\",\"zh-cn_index.md\":\"BLlxqq8G\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"codemirror-editor-vue3\",\"description\":\"CodeMirror component for Vue3\",\"base\":\"/codemirror-editor-vue3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"editLink\":{\"pattern\":\"https://github.com/RennCheung/codemirror-editor-vue3/edit/main/docs/:path\",\"text\":\"Edit this page on GitHub\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/RennCheung/codemirror-editor-vue3\"}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2021-present Renn Cheung\"},\"search\":{\"provider\":\"local\",\"options\":{\"locales\":{\"zh-CN\":{\"translations\":{\"button\":{\"buttonText\":\"搜索文档\",\"buttonAriaLabel\":\"搜索文档\"},\"modal\":{\"noResultsText\":\"无法找到相关结果\",\"resetButtonTitle\":\"清除查询条件\",\"footer\":{\"selectText\":\"选择\",\"navigateText\":\"切换\"}}}}}}}},\"locales\":{\"root\":{\"label\":\"English\",\"lang\":\"en\",\"themeConfig\":{\"lastUpdatedText\":\"Last update time\",\"nav\":[{\"text\":\"Guide\",\"link\":\"/guide/getting-started\",\"activeMatch\":\"/guide/g\"},{\"text\":\"More Example\",\"link\":\"/example/index\",\"activeMatch\":\"/example/g\"},{\"text\":\"Changelog\",\"link\":\"https://github.com/RennCheung/codemirror-editor-vue3/blob/main/CHANGELOG.md\"}],\"sidebar\":{\"/guide\":[{\"text\":\"Introduction\",\"collapsed\":false,\"items\":[{\"text\":\"Getting Started\",\"link\":\"/guide/getting-started\"},{\"text\":\"Component Props\",\"link\":\"/guide/props\"},{\"text\":\"Component Events\",\"link\":\"/guide/events\"},{\"text\":\"Language Modes\",\"link\":\"/guide/lang\"}]},{\"text\":\"prepattern\",\"items\":[{\"text\":\"merge(diff) mode\",\"link\":\"/guide/prepattern/merge\"},{\"text\":\"log mode\",\"link\":\"/guide/prepattern/log\"}]},{\"text\":\"Supplementary Instruction\",\"items\":[{\"text\":\"CodeMirror Static properties\",\"link\":\"/guide/supplementary/static-properties\"},{\"text\":\"Get instance object\",\"link\":\"/guide/supplementary/instance\"},{\"text\":\"Custom Theme\",\"link\":\"/guide/supplementary/custom-theme\"}]},{\"text\":\"Typescript Support\",\"link\":\"/guide/typescript/Support\"}],\"/example\":[{\"text\":\"Examples\",\"collapsed\":false,\"items\":[{\"text\":\"Basic Examples\",\"link\":\"/example/index\"},{\"text\":\"Code Syntax Check\",\"link\":\"/example/codeLint\"}]}]}}},\"zh-CN\":{\"label\":\"简体中文\",\"lang\":\"zh-CN\",\"themeConfig\":{\"lastUpdatedText\":\"最近更新时间\",\"nav\":[{\"text\":\"入门\",\"link\":\"/zh-CN/guide/getting-started\",\"activeMatch\":\"/guide/g\"},{\"text\":\"更多案例\",\"link\":\"/zh-CN/example/index\",\"activeMatch\":\"/example/g\"},{\"text\":\"更新日志\",\"link\":\"https://github.com/RennCheung/codemirror-editor-vue3/blob/main/CHANGELOG.md\"}],\"sidebar\":{\"/zh-CN/guide\":[{\"text\":\"介绍\",\"collapsed\":false,\"items\":[{\"text\":\"入门指南\",\"link\":\"/zh-CN/guide/getting-started\"},{\"text\":\"组件属性\",\"link\":\"/zh-CN/guide/props\"},{\"text\":\"组件事件\",\"link\":\"/zh-CN/guide/events\"},{\"text\":\"语言高亮\",\"link\":\"/zh-CN/guide/lang\"}]},{\"text\":\"预置模式\",\"items\":[{\"text\":\"merge(diff) 模式\",\"link\":\"/zh-CN/guide/prepattern/merge\"},{\"text\":\"log 模式\",\"link\":\"/zh-CN/guide/prepattern/log\"}]},{\"text\":\"补充说明\",\"items\":[{\"text\":\"CodeMirror 静态属性\",\"link\":\"/zh-CN/guide/supplementary/static-properties\"},{\"text\":\"获取实例对象\",\"link\":\"/zh-CN/guide/supplementary/instance\"},{\"text\":\"自定义主题\",\"link\":\"/zh-CN/guide/supplementary/custom-theme\"}]},{\"text\":\"Typescript 支持\",\"link\":\"/zh-CN/guide/typescript/Support\"}],\"/zh-CN/example\":[{\"text\":\"示例\",\"collapsed\":false,\"items\":[{\"text\":\"基础示例\",\"link\":\"/zh-CN/example/index\"},{\"text\":\"Code Syntax Check\",\"link\":\"/zh-CN/example/codeLint\"}]}]}}}},\"scrollOffset\":134,\"cleanUrls\":true}");</script>
</body>
</html>