From e31f983c21a3f27e6f7e164711aa5bfc2d511ec8 Mon Sep 17 00:00:00 2001
From: PaddiM8 <paddim8@pm.me>
Date: Tue, 5 Jan 2021 18:38:22 +0100
Subject: [PATCH] Fixed kalk_web browser compatibility problems

---
 kalk_web/package-lock.json         |  12 ++-
 kalk_web/package.json              |   3 +-
 kalk_web/src/ConsoleLine.svelte    |  11 ++-
 kalk_web/src/KalkCalculator.svelte | 122 ++++++++++++++---------------
 kalk_web/src/main.ts               |  23 ++++++
 kalk_web/webpack.config.ts         |   2 +-
 6 files changed, 103 insertions(+), 70 deletions(-)

diff --git a/kalk_web/package-lock.json b/kalk_web/package-lock.json
index b8f27e2..044e9cd 100644
--- a/kalk_web/package-lock.json
+++ b/kalk_web/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "@paddim8/kalk-component",
-	"version": "1.0.0",
+	"version": "1.0.6",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
@@ -7289,6 +7289,11 @@
 				"safe-buffer": "^5.0.1"
 			}
 		},
+		"shadow-selection-polyfill": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/shadow-selection-polyfill/-/shadow-selection-polyfill-1.1.0.tgz",
+			"integrity": "sha512-ntz8P6DLEFpx7gikeXZ4gSi3APE2D+BP0rKnnaBzED+Lm8je8nkNcayy6kGWPEDWMFbtm+Yvd1ONFaXcsVWn2w=="
+		},
 		"shebang-command": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -7915,6 +7920,11 @@
 				"strip-indent": "^3.0.0"
 			}
 		},
+		"svelte-tag": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/svelte-tag/-/svelte-tag-1.0.1.tgz",
+			"integrity": "sha512-d3+bXGCZ/aSfFc1QBBGJFFeiQ+sukks+GrBQbk1YTYxA6OhlfFbWfFcyBaz7ONhspOBN9gbRq4+AZYhORALQ+A=="
+		},
 		"svgo": {
 			"version": "1.3.2",
 			"resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
diff --git a/kalk_web/package.json b/kalk_web/package.json
index bf5bb2a..2201ece 100644
--- a/kalk_web/package.json
+++ b/kalk_web/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@paddim8/kalk-component",
-	"version": "1.0.6",
+	"version": "1.0.7",
 	"description": "A Svelte component for kalk, a calculator that supports user-defined functions and variables.",
 	"svelte": "src/main.ts",
 	"main": "public/build/bundle.js",
@@ -46,6 +46,7 @@
 		"svelte-check": "^1.1.15",
 		"svelte-loader-hot": "^0.3.1",
 		"svelte-preprocess": "^4.6.1",
+		"svelte-tag": "^1.0.1",
 		"terser-webpack-plugin": "^4.2.3",
 		"ts-loader": "^8.0.2",
 		"ts-node": "^9.0.0",
diff --git a/kalk_web/src/ConsoleLine.svelte b/kalk_web/src/ConsoleLine.svelte
index cd97a93..9724b6e 100644
--- a/kalk_web/src/ConsoleLine.svelte
+++ b/kalk_web/src/ConsoleLine.svelte
@@ -1,20 +1,19 @@
 <script lang="ts">
-    export let byUser = false;
+    export let byuser = false;
 </script>
 
-<style>
-    p {
+<style lang="scss">
+    .console-line-tg638d3 {
         margin-top: 0;
         margin-bottom: 5px;
         word-wrap: break-word;
     }
 
-    .result {
+    .console-line-tg638d3.result {
         margin-bottom: 10px;
     }
 </style>
 
-<svelte:options tag="console-line" />
-<p class:result={!byUser}>
+<p class="console-line-tg638d3" class:result={!byuser}>
     <slot />
 </p>
diff --git a/kalk_web/src/KalkCalculator.svelte b/kalk_web/src/KalkCalculator.svelte
index ef48ef5..7abc187 100644
--- a/kalk_web/src/KalkCalculator.svelte
+++ b/kalk_web/src/KalkCalculator.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { afterUpdate } from "svelte";
     import type { Context } from "@paddim8/kalk";
+    import ConsoleLine from "./ConsoleLine.svelte";
 
     // Props, HTML doesn't recognise them if they're not like this
     export let identifiercolor = "cornflowerblue";
@@ -57,7 +58,10 @@
                              href="https://kalk.netlify.app/#usage"
                              target="blank">Link to usage guide</a>`;
             } else {
-                const [result, success] = calculate(kalk, input);
+                const [result, success] = calculate(
+                    kalk,
+                    input.replace(/\s+/g, "") // Temporary fix, since it for some reason complains about spaces on chrome
+                );
                 output = success
                     ? highlight(result)[0]
                     : `<span style="color: ${errorcolor}">${result}</span>`;
@@ -119,16 +123,13 @@
     }
 
     function getCursorPos(element: HTMLInputElement): number {
-        const selection = window.getSelection();
-        if (selection.rangeCount !== 0) {
-            const range = selection.getRangeAt(0);
-            const preCaretRange = range.cloneRange();
-            preCaretRange.selectNodeContents(element);
-            preCaretRange.setEnd(range.endContainer, range.endOffset);
-            return preCaretRange.toString().length;
-        }
+        const selection = document.getSelection();
+        const range = selection.getRangeAt(0);
+        const preCaretRange = range.cloneRange();
+        preCaretRange.selectNodeContents(element);
+        preCaretRange.setEnd(range.endContainer, range.endOffset);
 
-        return 0;
+        return preCaretRange.toString().length;
     }
 
     function setCursorPos(element: HTMLElement, indexToSelect: number) {
@@ -187,7 +188,7 @@
         if (!input) return ["", 0];
         let result = input;
         let offset = 0;
-        result = result.replaceAll(
+        result = result.replace(
             /(?<identifier>[^!-@\s_|^⌊⌋⌈⌉]+(_\d+)?)|(?<op>[+\-/*%^!])/g,
             (substring, identifier, _, op) => {
                 if (identifier) {
@@ -239,7 +240,7 @@
 </script>
 
 <style lang="scss">
-    .calculator {
+    .calculator-tg638d3 {
         display: flex;
         flex-direction: column;
         width: 100%;
@@ -247,68 +248,67 @@
         box-sizing: border-box;
         background-color: inherit;
         color: inherit;
-    }
 
-    .output {
-        display: flex;
-        flex-grow: 1;
-        flex-direction: column;
-        background-color: inherit;
-        padding: 10px;
-        padding-bottom: 0;
-        box-sizing: border-box;
-        font-size: 1.4em;
-        overflow: auto;
-    }
-
-    .output > :first-child {
-        margin-top: auto;
-    }
-
-    .input-area {
-        background-color: inherit;
-        display: flex;
-        padding-left: 10px;
-        font-size: 1.4em;
-        padding-bottom: 10px;
-    }
-
-    .prompt,
-    .input {
-        background-color: inherit;
-    }
-
-    .input {
-        display: inline-block;
-        width: 100%;
-        color: white;
-        word-wrap: anywhere;
-        cursor: text;
-
-        &:focus {
-            outline: none;
+        .output {
+            display: flex;
+            flex-grow: 1;
+            flex-direction: column;
+            background-color: inherit;
+            padding: 10px;
+            padding-bottom: 0;
+            box-sizing: border-box;
+            font-size: 1.4em;
+            overflow: auto;
         }
-    }
 
-    [contenteditable][placeholder]:empty:before {
-        content: attr(placeholder);
-        position: absolute;
-        color: gray;
-        background-color: transparent;
+        .output > :first-child {
+            margin-top: auto;
+        }
+
+        .input-area {
+            background-color: inherit;
+            display: flex;
+            padding-left: 10px;
+            font-size: 1.4em;
+            padding-bottom: 10px;
+        }
+
+        .prompt,
+        .input {
+            background-color: inherit;
+        }
+
+        .input {
+            display: inline-block;
+            width: 100%;
+            color: white;
+            word-wrap: anywhere;
+            cursor: text;
+
+            &:focus {
+                outline: none;
+            }
+        }
+
+        [contenteditable][placeholder]:empty:before {
+            content: attr(placeholder);
+            position: absolute;
+            color: gray;
+            background-color: transparent;
+        }
     }
 </style>
 
-<svelte:options tag="kalk-calculator" />
-<div class="calculator">
+<div class="calculator-tg638d3">
     <div class="output" bind:this={outputElement}>
         <slot />
         {#each outputLines as line}
-            <console-line byUser={line[1]}>
+            <ConsoleLine byuser={line[1]}>
                 {#if line[1]}
                     <span style="color: {promptcolor}">&gt;&gt;</span>
                 {/if}
                 {@html line[0]}
-            </console-line>
+            </ConsoleLine>
         {/each}
     </div>
     <div class="input-area">
diff --git a/kalk_web/src/main.ts b/kalk_web/src/main.ts
index 8f77606..7cc5785 100644
--- a/kalk_web/src/main.ts
+++ b/kalk_web/src/main.ts
@@ -1,6 +1,29 @@
 import "./public-path.js";
 import KalkCalculator from './KalkCalculator.svelte';
+import ConsoleLine from './ConsoleLine.svelte';
+import component from "svelte-tag";
+
+new component({
+	component: KalkCalculator,
+	tagname: "kalk-calculator",
+	attributes: [
+		"identifiercolor",
+		"operatorcolor",
+		"promptcolor",
+		"errorcolor",
+		"linkcolor",
+		"hinttext",
+		"autofocus"
+	]
+});
+
+new component({
+	component: ConsoleLine,
+	tagname: "console-line",
+	attributes: ["byuser"]
+});
 
 export {
 	KalkCalculator,
+	ConsoleLine,
 }
\ No newline at end of file
diff --git a/kalk_web/webpack.config.ts b/kalk_web/webpack.config.ts
index 60b4c5c..26cd7f8 100644
--- a/kalk_web/webpack.config.ts
+++ b/kalk_web/webpack.config.ts
@@ -61,7 +61,7 @@ const config: webpack.Configuration & WebpackDevServer.Configuration = {
 				use: {
 					loader: 'svelte-loader-hot',
 					options: {
-						customElement: true,
+						//customElement: true,
 						dev: !prod,
 						emitCss: prod,
 						hotReload: !prod,