Update website

examples/website/src/index.html

@@ -108,13 +108,7 @@
                 </div>
               </label>
               <label class="radio-option">
-                <input
+                <input type="radio" name="tokenizer" value="Word" id="tokenizer-word" />
-                  type="radio"
-                  name="tokenizer"
-                  value="Word"
-                  id="tokenizer-word"
-                  checked
-                />
                 <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-label">Markdown</span>
-                  <span class="radio-description"
+                  <span class="radio-description">Preserve formatting</span>
-                    >Line-by-line, like <code>git merge</code></span
-                  >
                 </div>
               </label>
             </div>

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!";
+    "\n- Line-based\n\nCheck out what's the most complex conflict you can come up with!";
-  rightTextArea.value = sampleText
+  rightTextArea.value =
-    .replace(', for example,', ' such as')
+    sampleText.replace(', for example,', ' such as').replace('WASM', 'WebAssembly') +
-    .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 {

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',