From 189b9a7ad63eba9457540c5163befe8ce1a14da4 Mon Sep 17 00:00:00 2001
From: Nybkox <nybkox@gmail.com>
Date: Thu, 27 Feb 2025 15:55:06 +0100
Subject: [PATCH 1/3] feat: add xml-formatter

---
 packages/web/package.json                     |  3 +-
 .../web/src/celldata/XmlHighlighter.svelte    |  4 +-
 packages/web/src/celldata/formatXml.ts        | 24 -------
 yarn.lock                                     | 70 ++++---------------
 4 files changed, 19 insertions(+), 82 deletions(-)
 delete mode 100644 packages/web/src/celldata/formatXml.ts

diff --git a/packages/web/package.json b/packages/web/package.json
index e57c0d161..8b9bc916e 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -64,6 +64,7 @@
     "highlight.js": "^11.11.1",
     "interval-operations": "^1.0.7",
     "leaflet": "^1.8.0",
-    "wellknown": "^0.5.0"
+    "wellknown": "^0.5.0",
+    "xml-formatter": "^3.6.4"
   }
 }
diff --git a/packages/web/src/celldata/XmlHighlighter.svelte b/packages/web/src/celldata/XmlHighlighter.svelte
index a2973c5e6..f681a107d 100644
--- a/packages/web/src/celldata/XmlHighlighter.svelte
+++ b/packages/web/src/celldata/XmlHighlighter.svelte
@@ -1,14 +1,14 @@
 <script>
   import hljs from 'highlight.js/lib/core';
   import xmlGrammar from './xmlGrammar';
-  import formatXml from './formatXml';
+  import xmlFormat from 'xml-formatter';
   import { afterUpdate, onMount } from 'svelte';
 
   import 'highlight.js/styles/vs.css';
 
   export let code = '';
 
-  $: formattedCode = formatXml(code);
+  $: formattedCode = xmlFormat(code);
 
   onMount(() => {
     hljs.registerLanguage('xml', xmlGrammar);
diff --git a/packages/web/src/celldata/formatXml.ts b/packages/web/src/celldata/formatXml.ts
deleted file mode 100644
index 2baef0720..000000000
--- a/packages/web/src/celldata/formatXml.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-export default function formatXml(xml: string): string {
-  if (typeof xml !== 'string') return '';
-
-  xml = xml.replace(/>\s*</g, '><');
-
-  let formatted = '';
-  let indent = 0;
-
-  const tags = xml.split(/(<.*?>)/g).filter(s => s.trim());
-
-  for (let tag of tags) {
-    if (tag.startsWith('</')) {
-      indent--;
-      formatted += '\n' + '  '.repeat(indent) + tag;
-    } else if (tag.startsWith('<') && !tag.endsWith('/>') && !tag.startsWith('<?')) {
-      formatted += '\n' + '  '.repeat(indent) + tag;
-      indent++;
-    } else {
-      formatted += '\n' + '  '.repeat(indent) + tag;
-    }
-  }
-
-  return formatted.trim();
-}
diff --git a/yarn.lock b/yarn.lock
index c9a66c113..8bc12a4dc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -542,7 +542,7 @@
     "@azure/core-util" "^1.1.0"
     tslib "^2.6.2"
 
-"@azure/core-auth@^1.7.1", "@azure/core-auth@^1.8.0", "@azure/core-auth@^1.9.0":
+"@azure/core-auth@^1.8.0", "@azure/core-auth@^1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@azure/core-auth/-/core-auth-1.9.0.tgz#ac725b03fabe3c892371065ee9e2041bee0fd1ac"
   integrity sha512-FPwHpZywuyasDSLMqJ6fhbOK3TqUdviZNF8OqRGA4W5Ewib2lEEZ+pBsYcBa88B2NGO/SEnYPGhyBqNlE8ilSw==
@@ -604,20 +604,6 @@
     https-proxy-agent "^7.0.0"
     tslib "^2.6.2"
 
-"@azure/core-rest-pipeline@^1.15.1":
-  version "1.19.0"
-  resolved "https://registry.yarnpkg.com/@azure/core-rest-pipeline/-/core-rest-pipeline-1.19.0.tgz#4cc60d3f2ee68cf0ef379851b4ed175f7932c8c5"
-  integrity sha512-bM3308LRyg5g7r3Twprtqww0R/r7+GyVxj4BafcmVPo4WQoGt5JXuaqxHEFjw2o3rvFZcUPiqJMg6WuvEEeVUA==
-  dependencies:
-    "@azure/abort-controller" "^2.0.0"
-    "@azure/core-auth" "^1.8.0"
-    "@azure/core-tracing" "^1.0.1"
-    "@azure/core-util" "^1.11.0"
-    "@azure/logger" "^1.0.0"
-    http-proxy-agent "^7.0.0"
-    https-proxy-agent "^7.0.0"
-    tslib "^2.6.2"
-
 "@azure/core-rest-pipeline@^1.17.0":
   version "1.18.2"
   resolved "https://registry.yarnpkg.com/@azure/core-rest-pipeline/-/core-rest-pipeline-1.18.2.tgz#fa3a83b412d4b3e33edca30a71b1d5838306c075"
@@ -639,13 +625,6 @@
   dependencies:
     tslib "^2.6.2"
 
-"@azure/core-tracing@^1.1.1":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@azure/core-tracing/-/core-tracing-1.2.0.tgz#7be5d53c3522d639cf19042cbcdb19f71bc35ab2"
-  integrity sha512-UKTiEJPkWcESPYJz3X5uKRYyOcJD+4nYph+KpfdPRnQJVrZfk0KJgdnaAWKfhsBBtAf/D58Az4AvCJEmWgIBAg==
-  dependencies:
-    tslib "^2.6.2"
-
 "@azure/core-util@^1.0.0", "@azure/core-util@^1.1.0", "@azure/core-util@^1.2.0", "@azure/core-util@^1.6.1", "@azure/core-util@^1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@azure/core-util/-/core-util-1.9.0.tgz#469afd7e6452d5388b189f90d33f7756b0b210d1"
@@ -654,7 +633,7 @@
     "@azure/abort-controller" "^2.0.0"
     tslib "^2.6.2"
 
-"@azure/core-util@^1.11.0", "@azure/core-util@^1.8.1":
+"@azure/core-util@^1.11.0":
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/@azure/core-util/-/core-util-1.11.0.tgz#f530fc67e738aea872fbdd1cc8416e70219fada7"
   integrity sha512-DxOSLua+NdpWoSqULhjDyAZTXFdP/LKkqtYuxxz1SCN289zk3OG8UOpnCQAz/tygyACBtWp/BoO72ptK7msY8g==
@@ -662,22 +641,6 @@
     "@azure/abort-controller" "^2.0.0"
     tslib "^2.6.2"
 
-"@azure/cosmos@^4.1.0":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@azure/cosmos/-/cosmos-4.2.0.tgz#eb1379a6bf1d8e12d07151ce6e53f5248d63a715"
-  integrity sha512-acfAQTYLxgB/iZK7XvTVYe9NPk6DECEgcIXDQhyn7Uo4dGxeeW5D3YqLjLJrrzND5Iawer3eUQ5/iiLWvTGAxQ==
-  dependencies:
-    "@azure/abort-controller" "^2.0.0"
-    "@azure/core-auth" "^1.7.1"
-    "@azure/core-rest-pipeline" "^1.15.1"
-    "@azure/core-tracing" "^1.1.1"
-    "@azure/core-util" "^1.8.1"
-    fast-json-stable-stringify "^2.1.0"
-    jsbi "^4.3.0"
-    priorityqueuejs "^2.0.0"
-    semaphore "^1.1.0"
-    tslib "^2.6.2"
-
 "@azure/identity@^3.4.1":
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/@azure/identity/-/identity-3.4.2.tgz#6b01724c9caac7cadab6b63c76584345bda8e2de"
@@ -5279,7 +5242,7 @@ fast-glob@^3.0.3, fast-glob@^3.3.2:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
-fast-json-stable-stringify@2.x, fast-json-stable-stringify@^2.0.0, fast-json-stable-stringify@^2.1.0:
+fast-json-stable-stringify@2.x, fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
   integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
@@ -7889,11 +7852,6 @@ js2xmlparser@^4.0.2:
   dependencies:
     xmlcreate "^2.0.4"
 
-jsbi@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/jsbi/-/jsbi-4.3.0.tgz#b54ee074fb6fcbc00619559305c8f7e912b04741"
-  integrity sha512-SnZNcinB4RIcnEyZqFPdGPVgrg2AcnykiBy0sHVJQKHYeaLUvi3Exj+iaPpLnFVkDPZIV4U0yvgC9/R4uEAZ9g==
-
 jsbn@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-1.1.0.tgz#b01307cb29b618a1ed26ec79e911f803c4da0040"
@@ -9849,11 +9807,6 @@ printj@~1.1.0:
   resolved "https://registry.yarnpkg.com/printj/-/printj-1.1.2.tgz#d90deb2975a8b9f600fb3a1c94e3f4c53c78a222"
   integrity sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ==
 
-priorityqueuejs@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/priorityqueuejs/-/priorityqueuejs-2.0.0.tgz#96064040edd847ee9dd3013d8e16297399a6bd4f"
-  integrity sha512-19BMarhgpq3x4ccvVi8k2QpJZcymo/iFUcrhPd4V96kYGovOdTsWwy7fxChYi4QY+m2EnGBWSX9Buakz+tWNQQ==
-
 process-nextick-args@~1.0.6:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
@@ -10575,11 +10528,6 @@ secure-json-parse@^2.4.0:
   resolved "https://registry.yarnpkg.com/secure-json-parse/-/secure-json-parse-2.7.0.tgz#5a5f9cd6ae47df23dba3151edd06855d47e09862"
   integrity sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==
 
-semaphore@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/semaphore/-/semaphore-1.1.0.tgz#aaad8b86b20fe8e9b32b16dc2ee682a8cd26a8aa"
-  integrity sha512-O4OZEaNtkMd/K0i6js9SL+gqy0ZCBMgUvlSqHKi4IBdjhe7wB8pwztUk1BbZ1fmrvpwFrPbHzqd2w5pTcJH6LA==
-
 semiver@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/semiver/-/semiver-1.1.0.tgz#9c97fb02c21c7ce4fcf1b73e2c7a24324bdddd5f"
@@ -12487,11 +12435,23 @@ xlsx@0.16.9:
     wmf "~1.0.1"
     word "~0.3.0"
 
+xml-formatter@^3.6.4:
+  version "3.6.4"
+  resolved "https://registry.yarnpkg.com/xml-formatter/-/xml-formatter-3.6.4.tgz#c9e70b9e4fc02f1ec9b9e561ef148418bfdbeeb0"
+  integrity sha512-vkvTNw4u9mp72lMmJHw771NE9EJLX0kfwIcP+ZEo9eJ6HmotX23vmykyROyIQ9Y3a+ckdUdhxIE2ZO66rYuPrg==
+  dependencies:
+    xml-parser-xo "^4.1.2"
+
 xml-name-validator@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
   integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==
 
+xml-parser-xo@^4.1.2:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/xml-parser-xo/-/xml-parser-xo-4.1.3.tgz#b6f287a7de5b42b2b5a90be970fba296d87f828e"
+  integrity sha512-U6eN5Pyrlek9ottHVpT9e8YUax75oVYXbnYxU+utzDC7i+OyWj9ynsNMiZNQZvpuazbG0O7iLAs9FkcFmzlgSA==
+
 xmlchars@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"

From 322907b9729aa11fd78d0e95ccea4ecae6a90f9d Mon Sep 17 00:00:00 2001
From: Nybkox <nybkox@gmail.com>
Date: Thu, 27 Feb 2025 17:12:27 +0100
Subject: [PATCH 2/3] feat: add themes to xml view

---
 packages/web/index.html.tpl                   |   1 +
 packages/web/public/tokens.css                | 178 ++++++++++++++++++
 packages/web/src/celldata/XmlCellView.svelte  |   1 +
 .../web/src/celldata/XmlHighlighter.svelte    |   2 -
 packages/web/src/plugins/ThemeDark.svelte     |  28 +++
 packages/web/src/plugins/ThemeLight.svelte    |  31 ++-
 6 files changed, 238 insertions(+), 3 deletions(-)
 create mode 100644 packages/web/public/tokens.css

diff --git a/packages/web/index.html.tpl b/packages/web/index.html.tpl
index 69fb1621c..b188f34f9 100644
--- a/packages/web/index.html.tpl
+++ b/packages/web/index.html.tpl
@@ -15,6 +15,7 @@
     <link rel="manifest" href="manifest.json" />
 
     <link rel="stylesheet" href="global.css" />
+    <link rel="stylesheet" href="tokens.css" />
     <link rel="stylesheet" href="dimensions.css" />
     <link rel="stylesheet" href="bulma.css" />
     <link rel="stylesheet" href="icon-colors.css" />
diff --git a/packages/web/public/tokens.css b/packages/web/public/tokens.css
new file mode 100644
index 000000000..3074887a6
--- /dev/null
+++ b/packages/web/public/tokens.css
@@ -0,0 +1,178 @@
+.hljs {
+  background: var(--token-base);
+  color: var(--token-text);
+}
+
+.hljs-subst {
+  color: var(--token-subst);
+}
+
+.hljs-formula {
+  color: var(--token-formula);
+}
+
+.hljs-attr {
+  color: var(--token-attr);
+}
+
+.hljs-property {
+  color: var(--token-property);
+}
+
+.hljs-params {
+  color: var(--token-params);
+}
+
+.hljs-comment {
+  color: var(--token-comment);
+}
+
+.hljs-tag {
+  color: var(--token-tag);
+}
+
+.hljs-punctuation {
+  color: var(--token-punctuation);
+}
+
+.hljs-tag .hljs-name {
+  color: var(--token-tag-name);
+}
+
+.hljs-tag .hljs-attr {
+  color: var(--token-tag-attr);
+}
+
+.hljs-keyword {
+  color: var(--token-keyword);
+}
+
+.hljs-attribute {
+  color: var(--token-attribute);
+}
+
+.hljs-selector-tag {
+  color: var(--token-selector-tag);
+}
+
+.hljs-meta .hljs-keyword {
+  color: var(--token-meta-keyword);
+}
+
+.hljs-doctag {
+  color: var(--token-doctag);
+}
+
+.hljs-name {
+  color: var(--token-name);
+}
+
+.hljs-type {
+  color: var(--token-type);
+}
+
+.hljs-string {
+  color: var(--token-string);
+}
+
+.hljs-number {
+  color: var(--token-number);
+}
+
+.hljs-selector-id {
+  color: var(--token-selector-id);
+}
+
+.hljs-selector-class {
+  color: var(--token-selector-class);
+}
+
+.hljs-quote {
+  color: var(--token-quote);
+}
+
+.hljs-template-tag {
+  color: var(--token-template-tag);
+}
+
+.hljs-deletion {
+  color: var(--token-deletion);
+}
+
+.hljs-title {
+  color: var(--token-title);
+}
+
+.hljs-section {
+  color: var(--token-section);
+}
+
+.hljs-regexp {
+  color: var(--token-regexp);
+}
+
+.hljs-symbol {
+  color: var(--token-symbol);
+}
+
+.hljs-variable {
+  color: var(--token-variable);
+}
+
+.hljs-template-variable {
+  color: var(--token-template-variable);
+}
+
+.hljs-link {
+  color: var(--token-link);
+}
+
+.hljs-selector-attr {
+  color: var(--token-selector-attr);
+}
+
+.hljs-operator {
+  color: var(--token-operator);
+}
+
+.hljs-selector-pseudo {
+  color: var(--token-selector-pseudo);
+}
+
+.hljs-literal {
+  color: var(--token-literal);
+}
+
+.hljs-built_in {
+  color: var(--token-built_in);
+}
+
+.hljs-bullet {
+  color: var(--token-bullet);
+}
+
+.hljs-code {
+  color: var(--token-code);
+}
+
+.hljs-addition {
+  color: var(--token-addition);
+}
+
+.hljs-meta {
+  color: var(--token-meta);
+}
+
+.hljs-meta .hljs-string {
+  color: var(--token-meta-string);
+}
+
+.hljs-emphasis {
+  color: var(--token-emphasis);
+  font-style: italic;
+}
+
+.hljs-strong {
+  color: var(--token-strong);
+  font-weight: bold;
+}
diff --git a/packages/web/src/celldata/XmlCellView.svelte b/packages/web/src/celldata/XmlCellView.svelte
index ea52859a5..ca18a81dd 100644
--- a/packages/web/src/celldata/XmlCellView.svelte
+++ b/packages/web/src/celldata/XmlCellView.svelte
@@ -14,6 +14,7 @@
   .wrapper {
     overflow: scroll;
     position: absolute;
+    background: var(--token-base);
     top: 0;
     left: 0;
     right: 0;
diff --git a/packages/web/src/celldata/XmlHighlighter.svelte b/packages/web/src/celldata/XmlHighlighter.svelte
index f681a107d..72530bc23 100644
--- a/packages/web/src/celldata/XmlHighlighter.svelte
+++ b/packages/web/src/celldata/XmlHighlighter.svelte
@@ -4,8 +4,6 @@
   import xmlFormat from 'xml-formatter';
   import { afterUpdate, onMount } from 'svelte';
 
-  import 'highlight.js/styles/vs.css';
-
   export let code = '';
 
   $: formattedCode = xmlFormat(code);
diff --git a/packages/web/src/plugins/ThemeDark.svelte b/packages/web/src/plugins/ThemeDark.svelte
index b982b24c2..7afba20f4 100644
--- a/packages/web/src/plugins/ThemeDark.svelte
+++ b/packages/web/src/plugins/ThemeDark.svelte
@@ -72,5 +72,33 @@
 
     --theme-icon-inv-green: #8fd460;
     --theme-icon-inv-red: #e84749;
+
+    --token-base: #303030;
+    --token-text: #ddd;
+    --token-keyword: white;
+    --token-selector-tag: white;
+    --token-literal: white;
+    --token-section: white;
+    --token-link: white;
+    --token-subst: #ddd; /* default - using text color */
+    --token-string: #d88;
+    --token-title: #d88;
+    --token-name: #d88;
+    --token-type: #d88;
+    --token-attribute: #d88;
+    --token-symbol: #d88;
+    --token-bullet: #d88;
+    --token-built_in: #d88;
+    --token-addition: #d88;
+    --token-variable: #d88;
+    --token-template-tag: #d88;
+    --token-template-variable: #d88;
+    --token-comment: #979797;
+    --token-quote: #979797;
+    --token-deletion: #979797;
+    --token-meta: #979797;
+    --token-doctag: inherit; /* Inherits text color, but uses bold */
+    --token-strong: bold;
+    --token-emphasis: italic;
   }
 </style>
diff --git a/packages/web/src/plugins/ThemeLight.svelte b/packages/web/src/plugins/ThemeLight.svelte
index 64b6fe7fc..f0f6baace 100644
--- a/packages/web/src/plugins/ThemeLight.svelte
+++ b/packages/web/src/plugins/ThemeLight.svelte
@@ -45,7 +45,6 @@
     --theme-bg-hover: #ccc;
     --theme-bg-selected: #91d5ff; /* blue-3 */
     --theme-bg-selected-point: #40a9ff; /* blue-5 */
-    
 
     --theme-bg-statusbar-inv: #0050b3;
     --theme-bg-statusbar-inv-hover: #096dd9;
@@ -67,5 +66,35 @@
     --theme-icon-inv-green: #8fd460;
     --theme-icon-inv-red: #e84749;
 
+    --token-base: white;
+    --token-text: black;
+    --token-comment: #008000;
+    --token-quote: #008000;
+    --token-variable: #008000;
+    --token-keyword: #00f;
+    --token-selector-tag: #00f;
+    --token-built_in: #00f;
+    --token-name: #00f;
+    --token-tag: #00f;
+    --token-string: #a31515;
+    --token-title: #a31515;
+    --token-section: #a31515;
+    --token-attribute: #a31515;
+    --token-literal: #a31515;
+    --token-template-tag: #a31515;
+    --token-template-variable: #a31515;
+    --token-type: #a31515;
+    --token-addition: #a31515;
+    --token-deletion: #2b91af;
+    --token-selector-attr: #2b91af;
+    --token-selector-pseudo: #2b91af;
+    --token-meta: #2b91af;
+    --token-doctag: #808080;
+    --token-attr: #f00;
+    --token-symbol: #00b0e8;
+    --token-bullet: #00b0e8;
+    --token-link: #00b0e8;
+    --token-emphasis: italic;
+    --token-strong: bold;
   }
 </style>

From 0547aa20958c21b7d99f1267cfc6fd26326c2701 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Fri, 28 Feb 2025 10:20:18 +0100
Subject: [PATCH 3/3] xml format indent

---
 packages/web/src/celldata/XmlHighlighter.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/src/celldata/XmlHighlighter.svelte b/packages/web/src/celldata/XmlHighlighter.svelte
index 72530bc23..2f5fe655c 100644
--- a/packages/web/src/celldata/XmlHighlighter.svelte
+++ b/packages/web/src/celldata/XmlHighlighter.svelte
@@ -6,7 +6,7 @@
 
   export let code = '';
 
-  $: formattedCode = xmlFormat(code);
+  $: formattedCode = xmlFormat(code, { indentation: '  ' });
 
   onMount(() => {
     hljs.registerLanguage('xml', xmlGrammar);