From ec6901fa9b3eee3256cf0baeabe49e3f2926a7a9 Mon Sep 17 00:00:00 2001
From: feored <feordo@gmail.com>
Date: Tue, 24 Sep 2024 19:08:07 +0200
Subject: [PATCH] try wysiwyg editor

---
 src/lib/editor.svelte   | 111 ++++++++++++++++++++++++++++++++++++++++
 src/lib/format.ts       |   7 ++-
 src/routes/+page.svelte |  34 ++++++------
 3 files changed, 136 insertions(+), 16 deletions(-)
 create mode 100644 src/lib/editor.svelte

diff --git a/src/lib/editor.svelte b/src/lib/editor.svelte
new file mode 100644
index 0000000..bf32b64
--- /dev/null
+++ b/src/lib/editor.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+	import { tm_to_html, DEFAULT_TEXT_DETAILS } from '$lib/format';
+	import '$lib/style.css';
+	import type { TextDetails, TMText } from '$lib/format';
+	import { on } from 'svelte/events';
+	let editor: HTMLElement | null = $state(null);
+	let bg_color = $state('#808080');
+	let editable_text = $state('');
+	let tm_data: TMText[] = $state([]);
+	let cursor_pos = $state(0);
+
+	function setCaret(position: number) {
+		var range = document.createRange();
+		var sel = window.getSelection();
+		if (sel == null) return;
+		if (editor == null) return;
+
+		range.setStart(editor.childNodes[position], 0);
+		range.collapse(true);
+
+		sel.removeAllRanges();
+		sel.addRange(range);
+	}
+
+	function on_input(event: InputEvent) {
+		event.preventDefault();
+		if (event.inputType == 'insertText') {
+			let new_character = {
+				text: event.data || '',
+				style: {
+					...DEFAULT_TEXT_DETAILS
+				}
+			};
+			tm_data.splice(cursor_pos, 0, new_character);
+			cursor_pos++;
+			setCaret(cursor_position() + 11);
+		} else if (event.inputType == 'deleteContentBackward') {
+			console.log('delete');
+			console.log(cursor_pos);
+			console.log(tm_data.length);
+			if (cursor_pos == 0 || tm_data.length == 0) {
+				console.log('no characters to delete');
+				return;
+			}
+			tm_data.splice(cursor_pos - 1, 1);
+			cursor_pos--;
+			setCaret(cursor_position() - 1);
+		}
+	}
+
+	function cursor_position() {
+		var sel = document.getSelection();
+		if (sel == null) return 0;
+		sel.modify('extend', 'backward', 'paragraphboundary');
+		var pos = sel.toString().length;
+		if (sel.anchorNode != undefined) sel.collapseToEnd();
+
+		return pos;
+	}
+</script>
+
+<section>
+	<br />
+	<br />
+	<div
+		id="result"
+		style:background-color={bg_color}
+		contenteditable="true"
+		bind:this={editor}
+		style="width:100%; min-height:10rem;"
+		onbeforeinput={(event) => {
+			event.preventDefault();
+			on_input(event);
+		}}
+	>
+		{#each tm_data as block}
+			<span
+				style:color={block.style.color}
+				style:font-weight={block.style.bold ? 'bold' : 'normal'}
+				style:font-style={block.style.italic ? 'italic' : 'normal'}
+				class={block.style.width}
+				style:text-shadow={block.style.shadow ? '1px 1px 2px black' : 'none'}
+			>
+				{block.text}
+			</span>
+		{/each}
+	</div>
+	<label for="bgcolor"><small>Background Color</small></label>
+	<input id="bgcolor" type="color" bind:value={bg_color} />
+</section>
+
+<style>
+	#result {
+		padding: 0.5rem;
+		display: flex;
+		align-items: center;
+		min-height: 4rem;
+		border-radius: 6px;
+	}
+
+	#bgcolor {
+		margin-top: 1rem;
+		width: 3rem;
+		height: 3rem;
+	}
+
+	#result span {
+		font-family: 'Roboto Flex';
+		font-size: x-large;
+	}
+</style>
diff --git a/src/lib/format.ts b/src/lib/format.ts
index 3bde089..52c2397 100644
--- a/src/lib/format.ts
+++ b/src/lib/format.ts
@@ -25,7 +25,12 @@ export type TextDetails = {
     width: "narrow" | "wide" | "normal",
 }
 
-const DEFAULT_TEXT_DETAILS: TextDetails = {
+export type TMText = {
+    style: TextDetails,
+    text: string,
+}
+
+export const DEFAULT_TEXT_DETAILS: TextDetails = {
     color: "#fff",
     bold: false,
     italic: false,
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 334e2fe..93acf97 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,28 +1,30 @@
 <script lang="ts">
 	import '$lib/style.css';
 	import Viewer from '$lib/viewer.svelte';
+	import Editor from '$lib/editor.svelte';
 	import { closest_color, hex_6_to_3 } from '$lib/format';
 	import { Bold, Italic } from 'lucide-svelte';
 
-	let tm_text = $state('$i$fff/$beeo$CFDnz$fff/$CFCf$CFDe$BEDo$BEEr');
-	let tm_editor: HTMLTextAreaElement | null = $state(null);
-	let tm_text_color = $state('#ffffff');
+	// 	let tm_text = $state('$i$fff/$beeo$CFDnz$fff/$CFCf$CFDe$BEDo$BEEr');
+	// 	let tm_editor: HTMLTextAreaElement | null = $state(null);
+	// 	let tm_text_color = $state('#ffffff');
 
-	function add_modifier(modifier: string) {
-		tm_text += modifier;
-		if (tm_editor) {
-			tm_editor.focus();
-		}
-	}
+	// 	function add_modifier(modifier: string) {
+	// 		tm_text += modifier;
+	// 		if (tm_editor) {
+	// 			tm_editor.focus();
+	// 		}
+	// 	}
 
-	function sanitize_color() {
-		tm_text_color = closest_color(tm_text_color);
-		console.log(tm_text_color);
-	}
+	// 	function sanitize_color() {
+	// 		tm_text_color = closest_color(tm_text_color);
+	// 		console.log(tm_text_color);
+	// 	}
+	//
 </script>
 
 <main>
-	<h3>Trackmania Formatting Tool</h3>
+	<!--	<h3>Trackmania Formatting Tool</h3>
 
 	<fieldset class="flex">
 		<button onclick={() => add_modifier('$w')}><span class="roboto wide">Wide</span></button>
@@ -55,7 +57,9 @@
 
 	<textarea bind:this={tm_editor} bind:value={tm_text}></textarea>
 	<br />
-	<Viewer {tm_text} />
+	<Viewer {tm_text} /> -->
+
+	<Editor />
 </main>
 
 <style>