From bbe3b7573ad77762dec811964cf0e978401fc6b2 Mon Sep 17 00:00:00 2001
From: Andras Schmelczer <andras@schmelczer.dev>
Date: Wed, 11 Mar 2026 20:39:36 +0000
Subject: [PATCH] Update website

---
 examples/website/src/index.html | 22 ++++++++++------------
 examples/website/src/index.ts   | 16 ++++++++++------
 reconcile-js/src/index.ts       |  2 +-
 3 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/examples/website/src/index.html b/examples/website/src/index.html
index 03c7b08..2bfe8a6 100644
--- a/examples/website/src/index.html
+++ b/examples/website/src/index.html
@@ -108,13 +108,7 @@
                 </div>
               </label>
               <label class="radio-option">
-                <input
-                  type="radio"
-                  name="tokenizer"
-                  value="Word"
-                  id="tokenizer-word"
-                  checked
-                />
+                <input type="radio" name="tokenizer" value="Word" id="tokenizer-word" />
                 <span class="radio-custom" aria-hidden="true"></span>
                 <div class="radio-content">
                   <span class="radio-label">Word</span>
@@ -122,13 +116,17 @@
                 </div>
               </label>
               <label class="radio-option">
-                <input type="radio" name="tokenizer" value="Line" id="tokenizer-line" />
+                <input
+                  type="radio"
+                  name="tokenizer"
+                  value="Markdown"
+                  id="tokenizer-markdown"
+                  checked
+                />
                 <span class="radio-custom" aria-hidden="true"></span>
                 <div class="radio-content">
-                  <span class="radio-label">Line</span>
-                  <span class="radio-description"
-                    >Line-by-line, like <code>git merge</code></span
-                  >
+                  <span class="radio-label">Markdown</span>
+                  <span class="radio-description">Preserve formatting</span>
                 </div>
               </label>
             </div>
diff --git a/examples/website/src/index.ts b/examples/website/src/index.ts
index 9ce99a5..01edfd8 100644
--- a/examples/website/src/index.ts
+++ b/examples/website/src/index.ts
@@ -10,7 +10,11 @@ const tokenizerRadios = document.querySelectorAll(
   'input[name="tokenizer"]'
 ) as NodeListOf<HTMLInputElement>;
 
-const sampleText = `The "reconcile-text" Rust library is embedded on this page as a WASM module and powers these text boxes. Experiment with changing the "Original", "First user's edit", and "Second user's edit" text boxes to see competing changes get merged in real-time within the "Merged 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 tokenisation strategy, for example, deciding how casing or whitespace is taken into account.`;
+const sampleText = `The reconcile-text library is embedded on this page as a WASM module and powers these text boxes. Experiment with changing the "Original", "First user's edit", and "Second user's edit" text boxes to see competing changes get merged in real-time within the "Merged 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 tokenisation strategy which may be:
+- Character-based
+- Word-based`;
 
 let pendingUpdate: number | null = null;
 function scheduleUpdate(): void {
@@ -52,10 +56,10 @@ function loadSample(): void {
   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');
+    "\n- Line-based\n\nCheck out what's the most complex conflict you can come up with!";
+  rightTextArea.value =
+    sampleText.replace(', for example,', ' such as').replace('WASM', 'WebAssembly') +
+    '\n- Or your custom tokeniser';
 }
 
 function updateMergedText(): void {
@@ -191,7 +195,7 @@ function createSelectionOverlay(isLeft: boolean, isSelection: boolean): HTMLSpan
 
 function getSelectedTokenizer(): BuiltinTokenizer {
   const selectedRadio = Array.from(tokenizerRadios).find((radio) => radio.checked);
-  return (selectedRadio?.value ?? 'Word') as BuiltinTokenizer;
+  return (selectedRadio?.value ?? 'Markdown') as BuiltinTokenizer;
 }
 
 function resizeTextAreas(): void {
diff --git a/reconcile-js/src/index.ts b/reconcile-js/src/index.ts
index 08edfc4..d00051c 100644
--- a/reconcile-js/src/index.ts
+++ b/reconcile-js/src/index.ts
@@ -12,7 +12,7 @@ import {
 import wasmBytes from 'reconcile-text/reconcile_text_bg.wasm';
 
 // Define the enum values as const arrays to avoid duplication
-const BUILTIN_TOKENIZERS = ['Character', 'Line', 'Word'] as const;
+const BUILTIN_TOKENIZERS = ['Character', 'Line', 'Markdown', 'Word'] as const;
 const HISTORY_VALUES = [
   'Unchanged',
   'AddedFromLeft',