From a4fe6c3f0b6708b49ac7f3e91ba837b79e9cbf19 Mon Sep 17 00:00:00 2001
From: PaddiM8 <paddim8@pm.me>
Date: Mon, 4 Jan 2021 17:07:46 +0100
Subject: [PATCH] kalk_web history

---
 kalk_web/package.json              |  2 +-
 kalk_web/src/KalkCalculator.svelte | 59 +++++++++++++++++++++++++++---
 kalk_web/src/public-path.js        |  2 +-
 kalk_web/webpack.config.ts         |  3 +-
 4 files changed, 58 insertions(+), 8 deletions(-)

diff --git a/kalk_web/package.json b/kalk_web/package.json
index 596cd09..e009357 100644
--- a/kalk_web/package.json
+++ b/kalk_web/package.json
@@ -2,7 +2,7 @@
 	"name": "@paddim8/kalk-component",
 	"version": "1.0.0",
 	"description": "A Svelte component for kalk, a calculator that supports user-defined functions and variables.",
-	"svelte": "src/index.ts",
+	"svelte": "src/main.ts",
 	"main": "public/build/bundle.js",
 	"module": "public/build/bundle.js",
 	"author": "PaddiM8",
diff --git a/kalk_web/src/KalkCalculator.svelte b/kalk_web/src/KalkCalculator.svelte
index 9efc631..8949a4e 100644
--- a/kalk_web/src/KalkCalculator.svelte
+++ b/kalk_web/src/KalkCalculator.svelte
@@ -10,9 +10,10 @@
     export let backgroundColor = "#424242";
     export let textColor = "white";
 
-    let outputLines: string[] = [];
+    let outputLines: [value: string, byUser: boolean][] = [];
     let outputElement: HTMLElement;
     let kalkContext;
+    let selectedLineOffset: number = 0;
 
     afterUpdate(() => {
         // Scroll to bottom
@@ -23,6 +24,7 @@
 
     function handleKeyDown(event: KeyboardEvent, kalk) {
         if (event.key == "Enter") {
+            selectedLineOffset = 0;
             const target = event.target as HTMLInputElement;
             const input = target.textContent;
             let output: string;
@@ -42,15 +44,49 @@
                 }
             }
 
-            const inputHTML = `<span style="color: ${promptColor}">&gt;&gt;&nbsp;</span>${target.innerHTML}`;
             outputLines = output
-                ? [...outputLines, inputHTML, output]
-                : [...outputLines, inputHTML];
+                ? [...outputLines, [target.innerHTML, true], [output, false]]
+                : [...outputLines, [target.innerHTML, true]];
 
             target.innerHTML = "";
         }
     }
 
+    function handleKeyUp(event: KeyboardEvent) {
+        // on keyup, since pressing the arrow up key makes the cursor go to the start
+        // of the input field. This piece of code will put the cursor at the end,
+        // which therefore will need to be done afterwards, so that it doesn't just get moved back again.
+        if (event.key == "ArrowUp" || event.key == "ArrowDown") {
+            const target = event.target as HTMLInputElement;
+            const change = event.key == "ArrowUp" ? 1 : -1;
+            selectedLineOffset += change;
+
+            if (selectedLineOffset < 0) {
+                target.innerHTML = "";
+                selectedLineOffset = 0;
+                return;
+            }
+
+            const index = outputLines.length - selectedLineOffset - 1;
+            let line = outputLines[index];
+
+            // If it was just a response, get the one above that instead
+            while (line && !line[1]) {
+                line = outputLines[index - change];
+                selectedLineOffset += change;
+            }
+
+            if (line) {
+                target.innerHTML = line[0];
+                setCursorPosEnd(target);
+            }
+
+            if (selectedLineOffset >= outputLines.length) {
+                selectedLineOffset = outputLines.length - 1;
+            }
+        }
+    }
+
     function handleInput(event: Event) {
         const target = event.target as HTMLInputElement;
         const cursorPos = getCursorPos(target);
@@ -99,6 +135,15 @@
         selection.addRange(range);
     }
 
+    function setCursorPosEnd(element: HTMLElement) {
+        const range = document.createRange();
+        const selection = window.getSelection();
+        range.selectNodeContents(element);
+        range.setStart(element, range.endOffset);
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }
+
     function getTextNodesIn(node: Node): Text[] {
         const textNodes: Text[] = [];
 
@@ -225,7 +270,10 @@
         </p>
         {#each outputLines as line}
             <p class="consoleLine">
-                {@html line}
+                {#if line[1]}
+                    <span style="color: {promptColor}">&gt;&gt;</span>
+                {/if}
+                {@html line[0]}
             </p>
         {/each}
     </div>
@@ -238,6 +286,7 @@
                 contenteditable="true"
                 class="input"
                 on:keydown={(event) => handleKeyDown(event, kalk)}
+                on:keyup={handleKeyUp}
                 on:input={handleInput}
                 role="textbox" />
         {:catch error}
diff --git a/kalk_web/src/public-path.js b/kalk_web/src/public-path.js
index 07f6807..790a6eb 100644
--- a/kalk_web/src/public-path.js
+++ b/kalk_web/src/public-path.js
@@ -1,4 +1,4 @@
 // https://github.com/webpack/webpack/issues/7968#issuecomment-421058484
 const url = new URL(document.currentScript.src);
 const widgetLink = url.href.substring(0, url.href.lastIndexOf('/') + 1);
-__webpack_public_path__ = widgetLink;
\ No newline at end of file
+if (!__webpack_public_path__) __webpack_public_path__ = widgetLink;
\ No newline at end of file
diff --git a/kalk_web/webpack.config.ts b/kalk_web/webpack.config.ts
index 8ba9082..60b4c5c 100644
--- a/kalk_web/webpack.config.ts
+++ b/kalk_web/webpack.config.ts
@@ -46,6 +46,7 @@ const config: webpack.Configuration & WebpackDevServer.Configuration = {
 		mainFields: ['svelte', 'browser', 'module', 'main'],
 	},
 	output: {
+		publicPath: prod ? '' : '/build/',
 		path: __dirname + '/public/build',
 		filename: '[name].js',
 		chunkFilename: '[name].[id].js',
@@ -60,7 +61,7 @@ const config: webpack.Configuration & WebpackDevServer.Configuration = {
 				use: {
 					loader: 'svelte-loader-hot',
 					options: {
-						customElement: prod,
+						customElement: true,
 						dev: !prod,
 						emitCss: prod,
 						hotReload: !prod,