diff --git a/kalk_web/src/Calculator.svelte b/kalk_web/src/Calculator.svelte index 140503a..b1ab107 100644 --- a/kalk_web/src/Calculator.svelte +++ b/kalk_web/src/Calculator.svelte @@ -3,7 +3,7 @@ function handleKeyDown(event: KeyboardEvent) { if (event.key == "Enter") { const target = event.target as HTMLInputElement; - outputLines = [...outputLines, target.innerText]; + outputLines = [...outputLines, target.innerHTML]; target.innerHTML = ""; } } @@ -11,8 +11,10 @@ function handleInput(event: Event) { const target = event.target as HTMLInputElement; const cursorPos = getCursorPos(target); - target.innerHTML = highlight(target.textContent); - setCursorPos(target, cursorPos); + const [highlighted, offset] = highlight(target.textContent); + console.log(highlighted); + target.innerHTML = highlighted; + setCursorPos(target, cursorPos - offset); } function getCursorPos(element: HTMLInputElement): number { @@ -71,12 +73,46 @@ return textNodes; } - function highlight(input: string): string { + function highlight(input: string): [string, number] { let result = input; + let offset = 0; result = result.replaceAll( /(?[^!-@\s_|^⌊⌋⌈⌉]+(_\d+)?)|(?[+\-/*%^!])/g, (substring, identifier, _, op) => { if (identifier) { + switch (substring) { + case "sqrt": { + substring = "√"; + offset += 3; + break; + } + case "sum": { + substring = "Σ"; + offset += 2; + break; + } + case "pi": { + substring = "π"; + offset += 1; + break; + } + case "gamma": { + substring = "Γ"; + offset += 4; + break; + } + case "floor": { + substring = "⌊⌋"; + offset += 3; + break; + } + case "ceil": { + substring = "⌈⌉"; + offset += 3; + break; + } + } + return `${substring}`; } @@ -90,7 +126,7 @@ if (result.endsWith(" ")) result = result.slice(0, -1) + " "; - return result; + return [result, offset]; } @@ -146,7 +182,7 @@ {#each outputLines as line}

>> - {@html highlight(line)} + {@html line}

{/each}