Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/beartocode/mismerge
A modern merge editor for the Web
https://github.com/beartocode/mismerge
diff editor merge merge-editor mismerge svelte web-merge-editor
Last synced: 11 days ago
JSON representation
A modern merge editor for the Web
- Host: GitHub
- URL: https://github.com/beartocode/mismerge
- Owner: BearToCode
- License: mit
- Created: 2023-09-06T20:08:06.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-08-19T16:10:36.000Z (3 months ago)
- Last Synced: 2024-10-24T22:19:44.639Z (13 days ago)
- Topics: diff, editor, merge, merge-editor, mismerge, svelte, web-merge-editor
- Language: TypeScript
- Homepage: https://beartocode.github.io/mismerge/
- Size: 3.74 MB
- Stars: 46
- Watchers: 2
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
## A web-based merge editor
Mismerge is a modern two-way and one-way merge editor for the web, built with **Svelte**. You can [visit the demo](https://beartocode.github.io/mismerge/) and start merging now, or use it as a component for your project. It is also available in **React** and **Vue**.
## Features
- ▶️ One way merge editor
- 🔀 Two way merge editor
- 📑 Support lines wrapping
- 🌈 Support syntax highlighting
- ➖ Can ignore whitespace
- 📜 Custom input history
- 🔠 Can ignore case
- 🔢 Blocks, words and chars counter
- ✅ Works in SvelteKit & TypeScript
- 🌎 Available in React & Vue
## Installation
```
npm i @mismerge/core
```
## Usage
### Svelte
```svelte
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';
let rhs = 'baz';
:global(.mismerge) {
font-family: monospace;
min-height: 600px;
}
```
### React
Install the **additional** adapter package:
```
npm i @mismerge/react
```
```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 (
<>
>
);
}
```
### Vue
Install the **additional** adapter package:
```
npm i @mismerge/vue
```
> [!NOTE]
> Due to some differences in how Vue treats boolean attributes, some default properties may not correspond to the ones described in the API section.
```vue
import { MisMerge3, DefaultDarkColors } from '@mismerge/vue';
import '@mismerge/core/styles.css';
import '@mismerge/core/dark.css';
```
## Customization
### Adding syntax highlighting
You need to provide your own syntax highlighter. Example and demo using [Shiki-JS](https://github.com/shikijs/shiki). The highlighter can be either sync or async.
```svelte
import { codeToHtml } from 'shiki';
// ...
const highlight = async (text: string) =>
await codeToHtml(text, {
lang: 'js',
theme: 'min-dark'
});
```
### Changing connections colors
```svelte
import { DefaultDarkColors } from '@mismerge/core';
// ...
```
### Styles
If you want to customize the editor styles, you can copy the default [light](https://github.com/BearToCode/mismerge/blob/master/packages/core/src/lib/styles/light.css) or [dark](https://github.com/BearToCode/mismerge/blob/master/packages/core/src/lib/styles/dark.css) theme and adapt it to your need.
Here is a basic explanation of how the the rendered html looks like:
```html
```
## API
A list of properties for ``(2), ``(3), or both.
| Property | Type | Default | Description | Component |
| ----------------------- | ----------------------------------------------- | --------------------- | ------------------------------------------------- | --------- |
| `lhs` | `string` | `""` | Left-hand side text | Both |
| `ctr` | `string` | `""` | Center text | 3 |
| `rhs` | `string` | `""` | Right-hand side text | Both |
| `colors` | `EditorColors` | `DefaultLightColors` | Connections colors | Both |
| `highlight` | `(text: string) => string \| Promise` | `undefined` | Syntax highlighter | Both |
| `lhsEditable` | `boolean` | `true`(2), `false`(3) | Can edit left panel | Both |
| `ctrEditable` | `boolean` | `true` | Can edit center panel | 3 |
| `rhsEditable` | `boolean` | `true`(2), `false`(3) | Can edit right panel | Both |
| `lineDiffAlgorithm` | `'characters' \| 'words' \| 'words_with_space'` | `words_with_space` | Diff algorithm for same line side by side diff | Both |
| `disableMerging` | `boolean` | `false` | Disables merging | Both |
| `wrapLines` | `boolean` | `false` | Enables lines wrapping | Both |
| `disableWordsCounter` | `boolean` | `false` | Disables words counter | Both |
| `disableCharsCounter` | `boolean` | `false` | Disables chars counter | Both |
| `disableBlocksCounters` | `boolean` | `false` | Disables blocks counter | Both |
| `disableFooter` | `boolean` | `false` | Disables footer | Both |
| `ignoreWhitespace` | `boolean` | `false` | Ignore whitespace in diff | Both |
| `ignoreCase` | `boolean` | `false` | Ignore case in diff | Both |
| `conflictsResolved` | `boolean` | - | Binding for when all conflicts have been resolved | 3 |
Events (available for Svelte):
| Name | Description |
| ------------- | ------------------------------------------------------------- |
| `on:merge` | Fired when a block is merged from one side to an adjacent one |
| `on:resolve` | Fired when a conflict has its resolved status 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 |
## Contributing
### Project setup
Clone the repo:
```
git clone https://github.com/BearToCode/mismerge.git
cd mismerge
```
Download dependencies for all packages in the monorepo:
```
npm install
```
### The core package
The core package is inside `packages/core`. You can run the associated sveltekit app using `npm run core` or `cd packages/core` & `npm run dev`.
### The demo
The demo is inside the `demo` root folder. You can run it from root using `npm run demo` or `cd demo` & `npm run dev`.
It is automatically deployed to Github Pages with every push to master.
### Committing
This repository uses [commitizen](https://github.com/commitizen/cz-cli) to enforce similar commit messages. Commit using:
```
npm run commit
# or
git cz
```