andras/reconcile
1
0
Fork 0
Code Issues Pull requests 5 Projects Releases Packages Wiki Activity Actions

Improve style

Browse source
This commit is contained in:
Andras Schmelczer 2025-06-24 22:05:57 +01:00
parent 5e64297cec
commit 763f74a0e2
No known key found for this signature in database
GPG key ID: FC8F2C3D3D1A718C
5 changed files with 63 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

5
examples/website/index.html
View file

@ -2,7 +2,10 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, viewport-fit=cover"
/>
<meta
name="description"
content="Easily merge three versions of a text document with this 3-way text merge tool."

44
examples/website/script.js
View file

@ -1,4 +1,4 @@
import init, { mergeText, mergeTextWithHistory } from "./reconcile.js";
import init, { mergeTextWithHistory } from "./reconcile.js";
const originalTextArea = document.getElementById("original");
const leftTextArea = document.getElementById("left");
@ -7,7 +7,7 @@ const mergedTextArea = document.getElementById("merged");
const sampleText = `The \`reconcile\` Rust library is embedded on this page a WASM module and it powers these text boxes. Experiment with the "Original", "First concurrent edit", and "Second concurrent edit" text boxes to watch competing changes merge in real-time within the "Deconflicted result" box. Here, you will see color-coded tokens marking the origin of each token, including ones that got deleted. The result highly depends on the tokenization strategy, for example, deciding how casing or white-spacing is taken into account.`;
async function run() {
async function main() {
await init();
originalTextArea.addEventListener("input", updateMergedText);
@ -17,17 +17,17 @@ async function run() {
loadSample();
updateMergedText();
// Put cursor at the end of the text in leftTextArea
leftTextArea.focus();
leftTextArea.selectionStart = leftTextArea.value.length;
leftTextArea.selectionEnd = leftTextArea.value.length;
focusTextArea(leftTextArea);
}
function resizeTextAreas() {
autoResize(originalTextArea);
autoResize(leftTextArea);
autoResize(rightTextArea);
function loadSample() {
originalTextArea.value = sampleText;
leftTextArea.value =
sampleText.replace("color", "colour") +
" Check out what's the most complex conflict you can come up with!";
rightTextArea.value = sampleText
.replace(", for example,", " such as")
.replace("WASM", "WebAssembly");
}
function updateMergedText() {
@ -50,14 +50,12 @@ function updateMergedText() {
}
}
function loadSample() {
originalTextArea.value = sampleText;
leftTextArea.value =
sampleText.replace("color", "colour") +
" Check out what's the most complex conflict you can come up with!";
rightTextArea.value = sampleText
.replace(", for example,", " such as")
.replace("WASM", "WebAssembly");
function resizeTextAreas() {
if (!CSS.supports("field-sizing", "content")) {
autoResize(originalTextArea);
autoResize(leftTextArea);
autoResize(rightTextArea);
}
}
function autoResize(textarea) {
@ -65,4 +63,10 @@ function autoResize(textarea) {
textarea.style.height = textarea.scrollHeight + "px";
}
run();
function focusTextArea(textarea) {
textarea.focus();
textarea.selectionStart = textarea.value.length;
textarea.selectionEnd = textarea.value.length;
}
main();

28
examples/website/style.css
View file

@ -20,8 +20,8 @@ body {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
width: 100vw;
height: 100vh;
z-index: -1;
}
@ -138,6 +138,7 @@ textarea {
resize: none;
outline: none;
margin-bottom: 0;
field-sizing: content; /* Doesn't work in Safari yet */
}
#merged {
@ -145,26 +146,44 @@ textarea {
user-select: text;
}
.Left,
.Unchanged {
user-select: text;
}
.AddedFromLeft,
.RemovedFromLeft {
user-select: text;
background: #12d197;
}
.Right,
.AddedFromRight,
.RemovedFromRight {
user-select: text;
background: #85bff7;
}
.RemovedFromLeft,
.RemovedFromRight {
user-select: none;
text-decoration: line-through;
}
@media (max-width: 900px) {
header {
padding: 32px 18px 0 18px;
}
header > h1 {
margin-bottom: 18px;
}
header > p {
font-size: 1rem;
}
main {
padding: 24px 2vw;
padding: 18px;
}
}
@ -203,7 +222,6 @@ footer {
justify-content: center;
align-items: center;
color: #5a6272;
border-radius: 32px;
}
.github-link > svg {

2
scripts/dev-website.sh
View file

@ -11,4 +11,4 @@ cp -R pkg/reconcile_bg.wasm examples/website/
cd examples/website/
python3 -m http.server $1
python3 -m http.server $1 --bind 0.0.0.0

14
src/utils/history.rs
View file

@ -1,11 +1,9 @@
#[cfg(feature = "serde")]
use serde::{Deserialize, Serialize};
#[cfg(feature = "wasm")]
use wasm_bindgen::prelude::*;
#[cfg_attr(feature = "wasm", wasm_bindgen)]
#[cfg_attr(feature = "serde", derive(Serialize, Deserialize))]
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
#[cfg(feature = "wasm")]
pub enum History {
Unchanged = "Unchanged",
AddedFromLeft = "AddedFromLeft",
@ -13,3 +11,13 @@ pub enum History {
RemovedFromLeft = "RemovedFromLeft",
RemovedFromRight = "RemovedFromRight",
}
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
#[cfg(not(feature = "wasm"))]
pub enum History {
Unchanged,
AddedFromLeft,
AddedFromRight,
RemovedFromLeft,
RemovedFromRight,
}