### Install React Adapter Package

Source: https://github.com/beartocode/mismerge/blob/master/README.md

Install the additional adapter package for React. This package provides the React-specific integration for Mismerge.

```bash
npm i @mismerge/react
```

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

### Install Mismerge Core Package

Source: https://github.com/beartocode/mismerge/blob/master/README.md

Install the core Mismerge package using npm. This is the first step for using Mismerge in any project.

```bash
npm i @mismerge/core
```

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

### Run Demo Application

Source: https://github.com/beartocode/mismerge/blob/master/README.md

Start the demo application for the Mismerge project. This can be executed from the root directory of the repository.

```bash
npm run demo
```

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

### Run Demo Development Server

Source: https://github.com/beartocode/mismerge/blob/master/README.md

Start the development server for the demo application. Navigate to the 'demo' directory before running this command.

```bash
cd demo
npm run dev
```

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

### Install Vue Adapter Package

Source: https://github.com/beartocode/mismerge/blob/master/README.md

Install the additional adapter package for Vue. This package enables the use of Mismerge components within Vue projects.

```bash
npm i @mismerge/vue
```

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

### Run Core Package Development Server

Source: https://github.com/beartocode/mismerge/blob/master/README.md

Start the development server for the core package. Navigate to the 'packages/core' directory before running this command.

```bash
cd packages/core
npm run dev
```

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

### React Usage Example

Source: https://github.com/beartocode/mismerge/blob/master/README.md

Use the MisMerge3 component within a React application. This example demonstrates state management for the center content and applying theme colors.

```jsx
import { DefaultDarkColors, MisMerge3 } from '@mismerge/react';
import { useEffect, useState } from 'react';
import '@mismerge/core/styles.css';
import '@mismerge/core/dark.css';

function App() {
	const [ctr, setCtr] = useState('Hello world!');

	useEffect(() => {
		console.log(ctr);
	}, [ctr]);

	return (
		<>
			<MisMerge3
				lhs="Hello world!"
				ctr={ctr}
				rhs="Hello world!"
				onCtrChange={setCtr}
				colors={DefaultDarkColors}
				wrapLines={true}
			/>
		</>
	);
}

```

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

### Run Core Package SvelteKit App

Source: https://github.com/beartocode/mismerge/blob/master/README.md

Start the SvelteKit application for the core package. This can be done from the root directory or by navigating into the 'packages/core' directory.

```bash
npm run core
```

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

### Install Project Dependencies

Source: https://github.com/beartocode/mismerge/blob/master/README.md

Download all necessary dependencies for the monorepo packages. This command should be run after cloning the repository and navigating into its root directory.

```bash
npm install
```

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

### Svelte Usage Example

Source: https://github.com/beartocode/mismerge/blob/master/README.md

Integrate the MisMerge3 component in a Svelte application. Ensure core styles and theme styles are imported. The example shows both constant and editable sides.

```svelte
<script>
	import { MisMerge3 } from '@mismerge/core';
	// Core styles, required for the editor to work properly
	import '@mismerge/core/styles.css';

	import '@mismerge/core/light.css';
	// Or  '@mismerge/core/dark.css';

	let lhs = 'foo';
	let ctr = 'bar';
	rhs = 'baz';
</script>

<!-- Left-hand side and right-hand side constant text -->
<MisMerge3 {lhs} {rhs} bind:ctr />

<!-- All sides editable -->
<MisMerge3 bind:lhs bind:ctr bind:rhs lhsEditable rhsEditable >

<style>
  :global(.mismerge) {
    font-family: monospace;
    min-height: 600px;
  }
</style>
```

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

### Clone Mismerge Repository

Source: https://github.com/beartocode/mismerge/blob/master/README.md

Clone the Mismerge repository to your local machine. Navigate into the cloned directory to proceed with setup.

```bash
git clone https://github.com/BearToCode/mismerge.git
cd mismerge
```

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

### Vue Usage Example

Source: https://github.com/beartocode/mismerge/blob/master/README.md

Integrate the MisMerge3 component in a Vue application using the Composition API. This example shows binding editable properties and passing theme colors.

```vue
<script setup lang="ts">
import { MisMerge3, DefaultDarkColors } from '@mismerge/vue';
import '@mismerge/core/styles.css';
import '@mismerge/core/dark.css';
</script>

<template>
	<MisMerge3
		lhs="Hello"
		ctr="World"
		rhs="!"
		ctr-editable
		:colors="DefaultDarkColors"
		:on-ctr-change="console.log"
	/>
</template>

```

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

### Svelte Syntax Highlighting with Shiki-JS

Source: https://github.com/beartocode/mismerge/blob/master/README.md

Implement custom syntax highlighting in Svelte by providing a 'highlight' function. This example uses Shiki-JS to convert text to HTML with specified language and theme.

```svelte
<script>
	import { codeToHtml } from 'shiki';
	// ...

	const highlight = async (text: string) =>
		await codeToHtml(text, {
			lang: 'js',
			theme: 'min-dark'
		});
</script>

<MisMerge3 ... {highlight} />

```

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

### Changing Connection Colors

Source: https://github.com/beartocode/mismerge/blob/master/README.md

Customize the connection colors in the Mismerge editor by passing a 'colors' prop. This example uses the predefined DefaultDarkColors object.

```svelte
<script>
	import { DefaultDarkColors } from '@mismerge/core';
	// ...
</script>

<MisMerge3 ... colors={DefaultDarkColors} />

```

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

### Svelte: Custom Syntax Highlighting

Source: https://github.com/beartocode/mismerge/blob/master/packages/core/README.md

Integrate custom syntax highlighting in Svelte by providing a `highlight` function prop to the MisMerge3 component. This example uses Shiki-JS.

```svelte
<script>
	import { codeToHtml } from 'shiki';
	// ...

	const highlight = async (text: string) =>
		await codeToHtml(text, {
			lang: 'js',
			theme: 'min-dark'
		});
</script>

<MisMerge3 ... {highlight} />
```

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

### Customization: Changing Connection Colors

Source: https://github.com/beartocode/mismerge/blob/master/packages/core/README.md

Customize the connection colors in the Mismerge editor by passing a `colors` prop to the MisMerge3 component. This example uses predefined dark colors.

```svelte
<script>
	import { DefaultDarkColors } from '@mismerge/core';
	// ...
</script>

<MisMerge3 ... colors={DefaultDarkColors} />
```

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

### Commit Changes with Commitizen

Source: https://github.com/beartocode/mismerge/blob/master/README.md

Use Commitizen to enforce consistent commit message formats. Run this command from the root of the repository.

```bash
npm run commit
```

```bash
git cz
```

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

### Vue Usage: Two-Way Merge with Props

Source: https://github.com/beartocode/mismerge/blob/master/packages/core/README.md

Demonstrates using the MisMerge3 component in Vue, including passing props for editable states and colors, along with necessary CSS imports.

```vue
<script setup lang="ts">
import { MisMerge3, DefaultDarkColors } from './lib';
import '@mismerge/core/styles.css';
import '@mismerge/core/dark.css';
</script>

<template>
	<MisMerge3
		lhs="Hello"
		ctr="World"
		rhs="!"
		ctr-editable
		:colors="DefaultDarkColors"
		:on-ctr-change="console.log"
	/>
</template>

```

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

### Commit Changes with Commitizen

Source: https://github.com/beartocode/mismerge/blob/master/packages/core/README.md

Use Commitizen to enforce consistent commit message formatting. This is recommended for maintaining a clean commit history.

```bash
npm run commit
# or
git cz
```

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

### MisMerge Component Properties

Source: https://github.com/beartocode/mismerge/blob/master/packages/core/README.md

A list of properties that can be configured for the MisMerge component, affecting its appearance and functionality. These properties apply to both MisMerge2 and MisMerge3 components unless otherwise specified.

```APIDOC
## MisMerge Component Properties

### Description

Configurable properties for the `<MisMerge2>` and `<MisMerge3>` components.

### Properties

- **`lhs`** (string) - Required - Left-hand side text.
- **`ctr`** (string) - Required - Center text (only for MisMerge3).
- **`rhs`** (string) - Required - Right-hand side text.
- **`colors`** (EditorColors) - Optional - Connections colors. Defaults to `DefaultLightColors`.
- **`highlight`** ((text: string) => string | Promise<string>) - Optional - Syntax highlighter function.
- **`lhsEditable`** (boolean) - Optional - Determines if the left panel is editable. Defaults to `true` for MisMerge2, `false` for MisMerge3.
- **`ctrEditable`** (boolean) - Optional - Determines if the center panel is editable. Defaults to `true`.
- **`rhsEditable`** (boolean) - Optional - Determines if the right panel is editable. Defaults to `true` for MisMerge2, `false` for MisMerge3.
- **`lineDiffAlgorithm`** ('characters' | 'words' | 'words_with_space') - Optional - Diff algorithm for side-by-side diff. Defaults to `words_with_space`.
- **`disableMerging`** (boolean) - Optional - Disables merging functionality. Defaults to `false`.
- **`wrapLines`** (boolean) - Optional - Enables line wrapping. Defaults to `false`.
- **`disableWordsCounter`** (boolean) - Optional - Disables the words counter. Defaults to `false`.
- **`disableCharsCounter`** (boolean) - Optional - Disables the characters counter. Defaults to `false`.
- **`disableBlocksCounters`** (boolean) - Optional - Disables the blocks counter. Defaults to `false`.
- **`disableFooter`** (boolean) - Optional - Disables the footer. Defaults to `false`.
- **`ignoreWhitespace`** (boolean) - Optional - Ignores whitespace in diff calculation. Defaults to `false`.
- **`ignoreCase`** (boolean) - Optional - Ignores case in diff calculation. Defaults to `false`.
- **`conflictsResolved`** (boolean) - Optional - Binding for when all conflicts have been resolved (only for MisMerge3).
```

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

### React Usage: Two-Way Merge with State

Source: https://github.com/beartocode/mismerge/blob/master/packages/core/README.md

Implement a two-way merge editor in React using the MisMerge3 component. It demonstrates state management for the center pane and includes theme and style imports.

```jsx
import { DefaultDarkColors, MisMerge3 } from './lib';
import { useEffect, useState } from 'react';
import '@mismerge/core/styles.css';
import '@mismerge/core/dark.css';

function App() {
	const [ctr, setCtr] = useState('Hello world!');

	useEffect(() => {
		console.log(ctr);
	}, [ctr]);

	return (
		<>
			<MisMerge3
				lhs="Hello world!"
				ctr={ctr}
				rhs="Hello world!"
				onCtrChange={setCtr}
				colors={DefaultDarkColors}
				wrapLines={true}
			/>
		</>
	);
}

```

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

### Mismerge Editor HTML Structure

Source: https://github.com/beartocode/mismerge/blob/master/README.md

This HTML structure represents the basic layout of the Mismerge editor. It includes main content areas, view components, block wrappers, and input elements.

```html
<div class="mismerge">
	<div>
		<!-- Main -->
		<div class="msm__main">
			<!-- View -->
			<div class="msm__view">
				<!-- Content -->
				<div class="msm__view-content">
					<!-- Blocks wrapper -->
					<div class="msm__wrapper">
						<!-- Blocks -->
						<div data-component-id="abcdefgh" class="msm__block block-type">
							<!-- Lines -->
							<div class="msm__line">
								<!-- ... -->
							</div>
							<!-- ... -->
						</div>
						<!-- ... -->
					</div>

					<!-- Highlight overlay -->
					<div class="msm__highlight-overlay">
						<!-- ... -->
					</div>

					<!-- Input -->
					<textarea />
				</div>

				<!-- Side panel -->
				<div class="msm__side-panel">
					<!-- ... -->
				</div>
			</div>
		</div>
	</div>

	<!-- Footer -->
	<div class="msm__footer">
		<!-- ... -->
	</div>
</div>

```

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

### Mismerge Editor HTML Structure

Source: https://github.com/beartocode/mismerge/blob/master/packages/core/README.md

This HTML structure represents the basic layout of the Mismerge editor. You can use this as a reference when customizing styles.

```html
<div class="mismerge">
	<div>
		<!-- Main -->
		<div class="msm__main">
			<!-- View -->
			<div class="msm__view">
				<!-- Content -->
				<div class="msm__view-content">
					<!-- Blocks wrapper -->
					<div class="msm__wrapper">
						<!-- Blocks -->
						<div data-component-id="abcdefgh" class="msm__block block-type">
							<!-- Lines -->
							<div class="msm__line">
								<!-- ... -->
							</div>
							<!-- ... -->
						</div>
						<!-- ... -->
					</div>

					<!-- Highlight overlay -->
					<div class="msm__highlight-overlay">
						<!-- ... -->
					</div>

					<!-- Input -->
					<textarea />
				</div>

				<!-- Side panel -->
				<div class="msm__side-panel">
					<!-- ... -->
				</div>
			</div>
		</div>
	</div>

	<!-- Footer -->
	<div class="msm__footer">
		<!-- ... -->
	</div>
</div>
```

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

### MisMerge Component Events

Source: https://github.com/beartocode/mismerge/blob/master/packages/core/README.md

Events emitted by the MisMerge component, available for Svelte, allowing developers to react to user actions and internal state changes.

```APIDOC
## MisMerge Component Events

### Description

Events fired by the MisMerge component, primarily for Svelte integration.

### Events

- **`on:merge`**: Fired when a block is merged from one side to an adjacent one.
- **`on:resolve`**: Fired when a conflict's resolved status is toggled.
- **`on:delete`**: Fired when a block is deleted in the center side.
- **`on:input`**: Default `textarea` event.
- **`on:keydown`**: Default `textarea` event.
- **`on:keypress`**: Default `textarea` event.
- **`on:keyup`**: Default `textarea` event.
```

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