Made kalk_web shadow dom element again, and started to use a polyfill to make it work in other browsers

kalk_web/package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "@paddim8/kalk-component",
-	"version": "1.0.6",
+	"version": "1.0.7",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
@@ -7920,11 +7920,6 @@
 				"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",

kalk_web/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@paddim8/kalk-component",
-	"version": "1.0.7",
+	"version": "1.0.8",
 	"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,7 +46,6 @@
 		"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",
@@ -56,7 +55,8 @@
 		"webpack-dev-server": "^3.11.0"
 	},
 	"dependencies": {
-		"@paddim8/kalk": "^1.4.2"
+		"@paddim8/kalk": "^1.4.2",
+		"shadow-selection-polyfill": "^1.1.0"
 	},
 	"browserslist": [
 		"defaults"

kalk_web/src/ConsoleLine.svelte

@@ -3,17 +3,18 @@
 </script>
 
 <style lang="scss">
-    .console-line-tg638d3 {
+    p {
         margin-top: 0;
         margin-bottom: 5px;
         word-wrap: break-word;
     }
 
-    .console-line-tg638d3.result {
+    .result {
         margin-bottom: 10px;
     }
 </style>
 
-<p class="console-line-tg638d3" class:result={!byuser}>
+<svelte:options tag="console-line" />
+<p class:result={!byuser}>
     <slot />
 </p>

kalk_web/src/KalkCalculator.svelte

@@ -2,6 +2,7 @@
     import { afterUpdate } from "svelte";
     import type { Context } from "@paddim8/kalk";
     import ConsoleLine from "./ConsoleLine.svelte";
+    import * as shadow from "shadow-selection-polyfill";
 
     // Props, HTML doesn't recognise them if they're not like this
     export let identifiercolor = "cornflowerblue";
@@ -18,6 +19,7 @@
     let outputElement: HTMLElement;
     let kalkContext: Context;
     let selectedLineOffset: number = 0;
+    let calculatorElement: HTMLElement;
 
     afterUpdate(() => {
         // Scroll to bottom
@@ -123,8 +125,10 @@
     }
 
     function getCursorPos(element: HTMLInputElement): number {
-        const selection = document.getSelection();
-        const range = selection.getRangeAt(0);
+        const shadowRoot = calculatorElement.getRootNode() as ShadowRoot;
+        const range = shadow.getRange(shadowRoot);
+        //const selection = shadowRoot.getSelection();
+        //const range = selection.getRangeAt(0);
         const preCaretRange = range.cloneRange();
         preCaretRange.selectNodeContents(element);
         preCaretRange.setEnd(range.endContainer, range.endOffset);
@@ -240,7 +244,7 @@
 </script>
 
 <style lang="scss">
-    .calculator-tg638d3 {
+    .calculator {
         display: flex;
         flex-direction: column;
         width: 100%;
@@ -299,16 +303,17 @@
     }
 </style>
 
-<div class="calculator-tg638d3">
+<svelte:options tag="kalk-calculator" />
+<div class="calculator" bind:this={calculatorElement}>
     <div class="output" bind:this={outputElement}>
         <slot />
         {#each outputLines as line}
-            <ConsoleLine byuser={line[1]}>
+            <console-line byuser={line[1]}>
                 {#if line[1]}
                     <span style="color: {promptcolor}">&gt;&gt;</span>
                 {/if}
                 {@html line[0]}
-            </ConsoleLine>
+            </console-line>
         {/each}
     </div>
     <div class="input-area">

kalk_web/src/main.ts

@@ -1,27 +1,6 @@
 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,

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,