From 8b4623be2122126a343669712ccfae7935df9af0 Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Thu, 19 Dec 2024 14:27:50 -0300
Subject: [PATCH] feat(foxy-experimental-add-to-cart-builder): add syntax
 highlighting

---
 package-lock.json                             |  3 +--
 package.json                                  |  2 +-
 .../ExperimentalAddToCartBuilder.ts           | 10 +++++++++-
 src/mixins/themeable.ts                       | 20 +++++++++++++++++++
 4 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b5893003..608614eb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "cookie-storage": "^6.1.0",
         "dedent": "^1.5.3",
         "email-validator": "^2.0.4",
+        "highlight.js": "^10.7.3",
         "html-entities": "^2.4.0",
         "i18next": "^19.7.0",
         "i18next-http-backend": "^1.0.18",
@@ -75,7 +76,6 @@
         "eslint-plugin-html": "^6.1.2",
         "eslint-plugin-import": "^2.22.1",
         "eslint-plugin-sort-class-members": "^1.8.0",
-        "highlight.js": "^10.7.2",
         "husky": "^4.2.5",
         "lint-staged": "^10.3.0",
         "lit-html": "^1.3.0",
@@ -10629,7 +10629,6 @@
       "version": "10.7.3",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
       "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
-      "dev": true,
       "engines": {
         "node": "*"
       }
diff --git a/package.json b/package.json
index f1002737..93111972 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "uainfer": "^0.5.0",
     "vanilla-hcaptcha": "^1.0.2",
     "webcomponent-qr-code": "^1.0.5",
+    "highlight.js": "^10.7.3",
     "xstate": "^4.16.0"
   },
   "devDependencies": {
@@ -93,7 +94,6 @@
     "eslint-plugin-html": "^6.1.2",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-sort-class-members": "^1.8.0",
-    "highlight.js": "^10.7.2",
     "husky": "^4.2.5",
     "lint-staged": "^10.3.0",
     "lit-html": "^1.3.0",
diff --git a/src/elements/public/ExperimentalAddToCartBuilder/ExperimentalAddToCartBuilder.ts b/src/elements/public/ExperimentalAddToCartBuilder/ExperimentalAddToCartBuilder.ts
index 6ddffa36..59bbc70e 100644
--- a/src/elements/public/ExperimentalAddToCartBuilder/ExperimentalAddToCartBuilder.ts
+++ b/src/elements/public/ExperimentalAddToCartBuilder/ExperimentalAddToCartBuilder.ts
@@ -11,14 +11,18 @@ import { BooleanSelector } from '@foxy.io/sdk/core';
 import { decode, encode } from 'html-entities';
 import { InternalForm } from '../../internal/InternalForm/InternalForm';
 import { previewCSS } from './preview.css';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 import { html, svg } from 'lit-element';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { classMap } from '../../../utils/class-map';
 
 import debounce from 'lodash-es/debounce';
+import hljsxml from 'highlight.js/lib/languages/xml.js';
+import hljs from 'highlight.js/lib/core.js';
 
 const NS = 'experimental-add-to-cart-builder';
 const Base = ResponsiveMixin(TranslatableMixin(InternalForm, NS));
+hljs.registerLanguage('xml', hljsxml);
 
 /**
  * WARNING: this element is marked as experimental and is subject to change in future releases.
@@ -199,7 +203,11 @@ export class ExperimentalAddToCartBuilder extends Base<Data> {
                         'blur-sm': this.__signingState !== 'idle',
                       })}
                     >
-                      <code class="whitespace-pre">${addToCartCode.formHTML}</code>
+                      <code class="whitespace-pre"
+                        >${unsafeHTML(
+                          hljs.highlight(addToCartCode.formHTML, { language: 'xml' }).value
+                        )}</code
+                      >
                     </div>
 
                     <div
diff --git a/src/mixins/themeable.ts b/src/mixins/themeable.ts
index f1ac90ce..8bc0838f 100644
--- a/src/mixins/themeable.ts
+++ b/src/mixins/themeable.ts
@@ -158,6 +158,26 @@ export const ThemeableMixin = <TBase extends Base>(
               .snap-start {
                 scroll-snap-align: start;
               }
+
+              .hljs-tag {
+                color: var(--lumo-tertiary-text-color);
+                font-weight: 500;
+              }
+
+              .hljs-name {
+                color: var(--lumo-primary-text-color);
+                font-weight: 500;
+              }
+
+              .hljs-attr {
+                color: var(--lumo-secondary-text-color);
+                font-weight: 500;
+              }
+
+              .hljs-string {
+                color: var(--lumo-success-text-color);
+                font-weight: 500;
+              }
             }
           }
         `,