From 6cb8472d4a10d55620e1840e4d2e4cf8823fa2c1 Mon Sep 17 00:00:00 2001
From: galela <gsimon@woosmap.com>
Date: Mon, 3 Jun 2024 17:36:34 +0200
Subject: [PATCH 1/7] feat: Adding React map sample

---
 package-lock.json                             |  49 ++++++++
 package.json                                  |   4 +-
 samples/react-map-with-localities/index.njk   |   6 +
 samples/react-map-with-localities/index.tsx   | 119 ++++++++++++++++++
 .../react-map-with-localities.json            |  19 +++
 samples/react-map-with-localities/style.scss  |   6 +
 src/engines/typescript/sample-jsx.js          |   8 +-
 7 files changed, 209 insertions(+), 2 deletions(-)
 create mode 100644 samples/react-map-with-localities/index.njk
 create mode 100644 samples/react-map-with-localities/index.tsx
 create mode 100644 samples/react-map-with-localities/react-map-with-localities.json
 create mode 100644 samples/react-map-with-localities/style.scss

diff --git a/package-lock.json b/package-lock.json
index 4794abe7..5b3a3d51 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "name": "@woosmap/js-samples",
       "version": "1.30.0",
       "dependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "supercluster": "^7.1.3"
       },
       "devDependencies": {
@@ -4403,6 +4405,11 @@
       "integrity": "sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g==",
       "dev": true
     },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
     "node_modules/js-yaml": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
@@ -4614,6 +4621,17 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -6100,6 +6118,29 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
     "node_modules/read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -6518,6 +6559,14 @@
       "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==",
       "dev": true
     },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
     "node_modules/section-matter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
diff --git a/package.json b/package.json
index abd162ec..02e59ee5 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,8 @@
     "yaml": "^2.3.4"
   },
   "dependencies": {
-    "supercluster": "^7.1.3"
+    "supercluster": "^7.1.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }
diff --git a/samples/react-map-with-localities/index.njk b/samples/react-map-with-localities/index.njk
new file mode 100644
index 00000000..4376e938
--- /dev/null
+++ b/samples/react-map-with-localities/index.njk
@@ -0,0 +1,6 @@
+{% extends '../../src/_includes/layout.njk' %}
+{% block api %}
+{% endblock %}
+{% block html %}
+<div id="root"></div>
+{% endblock %}
\ No newline at end of file
diff --git a/samples/react-map-with-localities/index.tsx b/samples/react-map-with-localities/index.tsx
new file mode 100644
index 00000000..fb0bbf5e
--- /dev/null
+++ b/samples/react-map-with-localities/index.tsx
@@ -0,0 +1,119 @@
+// [START woosmap_react_map_with_localities]
+import { createRoot } from "react-dom/client";
+
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+// Define the types for the position and the Woosmap object
+type Position = { lat: number; lng: number };
+declare const woosmap: any;
+
+// Custom hook to load the Woosmap JavaScript API
+function useWoosmap(apiKey: string) {
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.src = `https://sdk.woosmap.com/map/map.js?key=${apiKey}`;
+    script.onload = () => setIsLoaded(true);
+    document.body.appendChild(script);
+  }, [apiKey]);
+
+  return isLoaded;
+}
+
+const MapContext = createContext<any>(null);
+const MapInstanceContext = createContext<woosmap.map.Map | null>(null);
+
+interface APIProviderProps {
+  apiKey: string;
+  children: React.ReactNode;
+}
+
+function APIProvider({ apiKey, children }: APIProviderProps) {
+  const isLoaded = useWoosmap(apiKey);
+
+  if (!isLoaded) {
+    return null;
+  }
+
+  return <MapContext.Provider value={woosmap}>{children}</MapContext.Provider>;
+}
+
+interface MapProps extends woosmap.map.MapOptions {
+  children: React.ReactNode;
+}
+
+function Map({ center, zoom, children }: MapProps) {
+  const mapRef = useRef<HTMLDivElement>(null);
+  const woosmap = useContext(MapContext);
+  const [mapInstance, setMapInstance] = useState<any>(null);
+
+  useEffect(() => {
+    if (mapRef.current) {
+      const map = new woosmap.map.Map(mapRef.current, {
+        zoom,
+        center,
+      });
+      setMapInstance(map);
+    }
+  }, [woosmap, zoom, center]);
+
+  return (
+    <MapInstanceContext.Provider value={mapInstance}>
+      <div ref={mapRef} style={{ width: "100%", height: "100vh" }}>
+        {children}
+      </div>
+    </MapInstanceContext.Provider>
+  );
+}
+
+function Marker({ position }: woosmap.map.MarkerOptions) {
+  const woosmap = useContext(MapContext);
+  const mapInstance = useContext(MapInstanceContext);
+
+  useEffect(() => {
+    if (mapInstance) {
+      const marker = new woosmap.map.Marker({
+        position,
+        icon: {
+          url: "https://images.woosmap.com/marker.png",
+          scaledSize: {
+            height: 50,
+            width: 32,
+          },
+        },
+      });
+      marker.setMap(mapInstance);
+    }
+  }, [woosmap, position, mapInstance]);
+
+  return null;
+}
+
+function App() {
+  const position: Position = { lat: 61.2176, lng: -149.8997 };
+
+  return (
+    <APIProvider apiKey={"YOUR_API_KEY"}>
+      <Map center={position} zoom={10}>
+        <Marker position={position} />
+      </Map>
+    </APIProvider>
+  );
+}
+
+window.addEventListener("DOMContentLoaded", () => {
+  const root = createRoot(document.getElementById("root")!);
+  root.render(<App />);
+});
+
+// [END woosmap_react_map_with_localities]
+let PRESERVE_COMMENT_ABOVE; // force tsc to maintain the comment above eslint-disable-line
+
+export {};
diff --git a/samples/react-map-with-localities/react-map-with-localities.json b/samples/react-map-with-localities/react-map-with-localities.json
new file mode 100644
index 00000000..0a2de532
--- /dev/null
+++ b/samples/react-map-with-localities/react-map-with-localities.json
@@ -0,0 +1,19 @@
+{
+  "title": "React Map with Localities",
+  "description": "A basic Woosmap Map sample using React JS Framework",
+  "callback": "initMap",
+  "category": "Map Basics",
+  "tsx": true,
+  "tag": "react_map_with_localities",
+  "name": "react-map-with-localities",
+  "pagination": {
+    "data": "mode",
+    "size": 1,
+    "alias": "mode"
+  },
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "dependencies": [
+    "react",
+    "react-dom"
+  ]
+}
diff --git a/samples/react-map-with-localities/style.scss b/samples/react-map-with-localities/style.scss
new file mode 100644
index 00000000..2d9df9c4
--- /dev/null
+++ b/samples/react-map-with-localities/style.scss
@@ -0,0 +1,6 @@
+@use 'sass:meta'; // To enable @use via meta.load-css and keep comments in order
+
+/* [START react_map_with_localities] */
+@include meta.load-css("../../shared/scss/_default.scss");
+
+/* [END react_map_with_localities] */
diff --git a/src/engines/typescript/sample-jsx.js b/src/engines/typescript/sample-jsx.js
index ceb0c220..cb8444cd 100644
--- a/src/engines/typescript/sample-jsx.js
+++ b/src/engines/typescript/sample-jsx.js
@@ -12,7 +12,13 @@ module.exports = {
           "utf8",
         ),
       ),
-      file: ["docs.jsx", "app.tsx", "jsfiddle.jsx", "highlight.jsx"],
+      file: [
+        "docs.jsx",
+        "app.tsx",
+        "jsfiddle.jsx",
+        "highlight.tsx",
+        "highlight.jsx",
+      ],
       pagination: {
         data: "file",
         alias: "file",

From a75d043be38d114b1cc93749e71d0722bf217ceb Mon Sep 17 00:00:00 2001
From: galela <gsimon@woosmap.com>
Date: Mon, 3 Jun 2024 17:55:02 +0200
Subject: [PATCH 2/7] fix: fix React Map Typings

---
 samples/react-map-with-localities/index.tsx | 27 ++++++++++-----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/samples/react-map-with-localities/index.tsx b/samples/react-map-with-localities/index.tsx
index fb0bbf5e..be644fa2 100644
--- a/samples/react-map-with-localities/index.tsx
+++ b/samples/react-map-with-localities/index.tsx
@@ -9,8 +9,7 @@ import React, {
   useState,
 } from "react";
 
-// Define the types for the position and the Woosmap object
-type Position = { lat: number; lng: number };
+// Define the types for the Woosmap object
 declare const woosmap: any;
 
 // Custom hook to load the Woosmap JavaScript API
@@ -35,7 +34,7 @@ interface APIProviderProps {
   children: React.ReactNode;
 }
 
-function APIProvider({ apiKey, children }: APIProviderProps) {
+const APIProvider: React.FC<APIProviderProps> = ({ apiKey, children }) => {
   const isLoaded = useWoosmap(apiKey);
 
   if (!isLoaded) {
@@ -43,16 +42,16 @@ function APIProvider({ apiKey, children }: APIProviderProps) {
   }
 
   return <MapContext.Provider value={woosmap}>{children}</MapContext.Provider>;
-}
+};
 
 interface MapProps extends woosmap.map.MapOptions {
   children: React.ReactNode;
 }
 
-function Map({ center, zoom, children }: MapProps) {
+const WoosmapMap: React.FC<MapProps> = ({ center, zoom, children }) => {
   const mapRef = useRef<HTMLDivElement>(null);
   const woosmap = useContext(MapContext);
-  const [mapInstance, setMapInstance] = useState<any>(null);
+  const [mapInstance, setMapInstance] = useState<woosmap.map.Map>(null);
 
   useEffect(() => {
     if (mapRef.current) {
@@ -71,9 +70,9 @@ function Map({ center, zoom, children }: MapProps) {
       </div>
     </MapInstanceContext.Provider>
   );
-}
+};
 
-function Marker({ position }: woosmap.map.MarkerOptions) {
+const Marker: React.FC<woosmap.map.MarkerOptions> = ({ position }) => {
   const woosmap = useContext(MapContext);
   const mapInstance = useContext(MapInstanceContext);
 
@@ -94,19 +93,19 @@ function Marker({ position }: woosmap.map.MarkerOptions) {
   }, [woosmap, position, mapInstance]);
 
   return null;
-}
+};
 
-function App() {
-  const position: Position = { lat: 61.2176, lng: -149.8997 };
+const App: React.VFC = () => {
+  const position: woosmap.map.LatLngLiteral = { lat: 61.2176, lng: -149.8997 };
 
   return (
     <APIProvider apiKey={"YOUR_API_KEY"}>
-      <Map center={position} zoom={10}>
+      <WoosmapMap center={position} zoom={10}>
         <Marker position={position} />
-      </Map>
+      </WoosmapMap>
     </APIProvider>
   );
-}
+};
 
 window.addEventListener("DOMContentLoaded", () => {
   const root = createRoot(document.getElementById("root")!);

From 108f23476ca513b1edcc0cbb6f65174a9fe55e6b Mon Sep 17 00:00:00 2001
From: galela <gsimon@woosmap.com>
Date: Tue, 4 Jun 2024 14:29:45 +0200
Subject: [PATCH 3/7] feat: Added react map properly and deploy pr

---
 .github/workflows/pr-to-s3.yml               |  33 ++++++
 samples/highlight.html.njk                   |  39 ++++---
 samples/react-map-with-localities/index.tsx  | 116 +++++++++++++++++--
 samples/react-map-with-localities/style.scss |   2 +
 shared/scss/_autocomplete_list.scss          |   4 +
 tsconfig.json                                |   6 +-
 6 files changed, 177 insertions(+), 23 deletions(-)
 create mode 100644 .github/workflows/pr-to-s3.yml

diff --git a/.github/workflows/pr-to-s3.yml b/.github/workflows/pr-to-s3.yml
new file mode 100644
index 00000000..6fa56410
--- /dev/null
+++ b/.github/workflows/pr-to-s3.yml
@@ -0,0 +1,33 @@
+name: PR Deploy
+on:
+  pull_request:
+    branches: [ master ]
+  workflow_dispatch:
+
+jobs:
+  push-to-s3:
+    if: "!contains(github.event.head_commit.message, 'skip ci')"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node
+      - run: npm ci
+      - run: npm run build
+      - name: include ignored files
+        run: |
+          rm -rf dist/samples/**/node_modules
+          rm -rf dist/samples/**/package-lock.json
+          rm -rf dist/samples/**/app/.gitignore
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: eu-central-1
+      - name: Deploy static site to S3 bucket
+        run: aws s3 sync dist s3://demo.woosmap.com/misc/js-samples-pr-deploy/pr-${{ github.event.pull_request.number }}/ --acl public-read
diff --git a/samples/highlight.html.njk b/samples/highlight.html.njk
index a1faeffe..f43f0c6d 100644
--- a/samples/highlight.html.njk
+++ b/samples/highlight.html.njk
@@ -5,18 +5,31 @@ pagination:
     size: 1
 permalink: /samples/{{ sample.fileSlug }}/highlight/highlight.html
 ---
+{% if sample.data.tsx %}
+    {% set ts_extension = 'tsx' %}
+    {% set ts_highlight = 'tsx' %}
+    {% set js_extension = 'jsx' %}
+    {% set js_highlight = 'jsx' %}
+{% else %}
+    {% set ts_extension = 'ts' %}
+    {% set ts_highlight = 'typescript' %}
+    {% set js_extension = 'js' %}
+    {% set js_highlight = 'javascript' %}
+{% endif %}
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <title>Highlight</title>
     <script>
-        var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(e){var n=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,r={},a={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof i?new i(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function e(n,t){var r,i;switch(t=t||{},a.util.type(n)){case"Object":if(i=a.util.objId(n),t[i])return t[i];for(var l in r={},t[i]=r,n)n.hasOwnProperty(l)&&(r[l]=e(n[l],t));return r;case"Array":return i=a.util.objId(n),t[i]?t[i]:(r=[],t[i]=r,n.forEach((function(n,a){r[a]=e(n,t)})),r);default:return n}},getLanguage:function(e){for(;e;){var t=n.exec(e.className);if(t)return t[1].toLowerCase();e=e.parentElement}return"none"},setLanguage:function(e,t){e.className=e.className.replace(RegExp(n,"gi"),""),e.classList.add("language-"+t)},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(r){var e=(/at [^(\r\n]*\((.*):[^:]+:[^:]+\)$/i.exec(r.stack)||[])[1];if(e){var n=document.getElementsByTagName("script");for(var t in n)if(n[t].src==e)return n[t]}return null}},isActive:function(e,n,t){for(var r="no-"+n;e;){var a=e.classList;if(a.contains(n))return!0;if(a.contains(r))return!1;e=e.parentElement}return!!t}},languages:{plain:r,plaintext:r,text:r,txt:r,extend:function(e,n){var t=a.util.clone(a.languages[e]);for(var r in n)t[r]=n[r];return t},insertBefore:function(e,n,t,r){var i=(r=r||a.languages)[e],l={};for(var o in i)if(i.hasOwnProperty(o)){if(o==n)for(var s in t)t.hasOwnProperty(s)&&(l[s]=t[s]);t.hasOwnProperty(o)||(l[o]=i[o])}var u=r[e];return r[e]=l,a.languages.DFS(a.languages,(function(n,t){t===u&&n!=e&&(this[n]=l)})),l},DFS:function e(n,t,r,i){i=i||{};var l=a.util.objId;for(var o in n)if(n.hasOwnProperty(o)){t.call(n,o,n[o],r||o);var s=n[o],u=a.util.type(s);"Object"!==u||i[l(s)]?"Array"!==u||i[l(s)]||(i[l(s)]=!0,e(s,t,o,i)):(i[l(s)]=!0,e(s,t,null,i))}}},plugins:{},highlightAll:function(e,n){a.highlightAllUnder(document,e,n)},highlightAllUnder:function(e,n,t){var r={callback:t,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};a.hooks.run("before-highlightall",r),r.elements=Array.prototype.slice.apply(r.container.querySelectorAll(r.selector)),a.hooks.run("before-all-elements-highlight",r);for(var i,l=0;i=r.elements[l++];)a.highlightElement(i,!0===n,r.callback)},highlightElement:function(n,t,r){var i=a.util.getLanguage(n),l=a.languages[i];a.util.setLanguage(n,i);var o=n.parentElement;o&&"pre"===o.nodeName.toLowerCase()&&a.util.setLanguage(o,i);var s={element:n,language:i,grammar:l,code:n.textContent};function u(e){s.highlightedCode=e,a.hooks.run("before-insert",s),s.element.innerHTML=s.highlightedCode,a.hooks.run("after-highlight",s),a.hooks.run("complete",s),r&&r.call(s.element)}if(a.hooks.run("before-sanity-check",s),(o=s.element.parentElement)&&"pre"===o.nodeName.toLowerCase()&&!o.hasAttribute("tabindex")&&o.setAttribute("tabindex","0"),!s.code)return a.hooks.run("complete",s),void(r&&r.call(s.element));if(a.hooks.run("before-highlight",s),s.grammar)if(t&&e.Worker){var c=new Worker(a.filename);c.onmessage=function(e){u(e.data)},c.postMessage(JSON.stringify({language:s.language,code:s.code,immediateClose:!0}))}else u(a.highlight(s.code,s.grammar,s.language));else u(a.util.encode(s.code))},highlight:function(e,n,t){var r={code:e,grammar:n,language:t};if(a.hooks.run("before-tokenize",r),!r.grammar)throw new Error('The language "'+r.language+'" has no grammar.');return r.tokens=a.tokenize(r.code,r.grammar),a.hooks.run("after-tokenize",r),i.stringify(a.util.encode(r.tokens),r.language)},tokenize:function(e,n){var t=n.rest;if(t){for(var r in t)n[r]=t[r];delete n.rest}var a=new s;return u(a,a.head,e),o(e,a,n,a.head,0),function(e){for(var n=[],t=e.head.next;t!==e.tail;)n.push(t.value),t=t.next;return n}(a)},hooks:{all:{},add:function(e,n){var t=a.hooks.all;t[e]=t[e]||[],t[e].push(n)},run:function(e,n){var t=a.hooks.all[e];if(t&&t.length)for(var r,i=0;r=t[i++];)r(n)}},Token:i};function i(e,n,t,r){this.type=e,this.content=n,this.alias=t,this.length=0|(r||"").length}function l(e,n,t,r){e.lastIndex=n;var a=e.exec(t);if(a&&r&&a[1]){var i=a[1].length;a.index+=i,a[0]=a[0].slice(i)}return a}function o(e,n,t,r,s,g){for(var f in t)if(t.hasOwnProperty(f)&&t[f]){var h=t[f];h=Array.isArray(h)?h:[h];for(var d=0;d<h.length;++d){if(g&&g.cause==f+","+d)return;var v=h[d],p=v.inside,m=!!v.lookbehind,y=!!v.greedy,k=v.alias;if(y&&!v.pattern.global){var x=v.pattern.toString().match(/[imsuy]*$/)[0];v.pattern=RegExp(v.pattern.source,x+"g")}for(var b=v.pattern||v,w=r.next,A=s;w!==n.tail&&!(g&&A>=g.reach);A+=w.value.length,w=w.next){var E=w.value;if(n.length>e.length)return;if(!(E instanceof i)){var P,L=1;if(y){if(!(P=l(b,A,e,m))||P.index>=e.length)break;var S=P.index,O=P.index+P[0].length,j=A;for(j+=w.value.length;S>=j;)j+=(w=w.next).value.length;if(A=j-=w.value.length,w.value instanceof i)continue;for(var C=w;C!==n.tail&&(j<O||"string"==typeof C.value);C=C.next)L++,j+=C.value.length;L--,E=e.slice(A,j),P.index-=A}else if(!(P=l(b,0,E,m)))continue;S=P.index;var N=P[0],_=E.slice(0,S),M=E.slice(S+N.length),W=A+E.length;g&&W>g.reach&&(g.reach=W);var z=w.prev;if(_&&(z=u(n,z,_),A+=_.length),c(n,z,L),w=u(n,z,new i(f,p?a.tokenize(N,p):N,k,N)),M&&u(n,w,M),L>1){var I={cause:f+","+d,reach:W};o(e,n,t,w.prev,A,I),g&&I.reach>g.reach&&(g.reach=I.reach)}}}}}}function s(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function u(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function c(e,n,t){for(var r=n.next,a=0;a<t&&r!==e.tail;a++)r=r.next;n.next=r,r.prev=n,e.length-=a}if(e.Prism=a,i.stringify=function e(n,t){if("string"==typeof n)return n;if(Array.isArray(n)){var r="";return n.forEach((function(n){r+=e(n,t)})),r}var i={type:n.type,content:e(n.content,t),tag:"span",classes:["token",n.type],attributes:{},language:t},l=n.alias;l&&(Array.isArray(l)?Array.prototype.push.apply(i.classes,l):i.classes.push(l)),a.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=" "+s+'="'+(i.attributes[s]||"").replace(/"/g,"&quot;")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+o+">"+i.content+"</"+i.tag+">"},!e.document)return e.addEventListener?(a.disableWorkerMessageHandler||e.addEventListener("message",(function(n){var t=JSON.parse(n.data),r=t.language,i=t.code,l=t.immediateClose;e.postMessage(a.highlight(i,a.languages[r],r)),l&&e.close()}),!1),a):a;var g=a.util.currentScript();function f(){a.manual||a.highlightAll()}if(g&&(a.filename=g.src,g.hasAttribute("data-manual")&&(a.manual=!0)),!a.manual){var h=document.readyState;"loading"===h||"interactive"===h&&g&&g.defer?document.addEventListener("DOMContentLoaded",f):window.requestAnimationFrame?window.requestAnimationFrame(f):window.setTimeout(f,16)}return a}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
-        Prism.languages.markup={comment:{pattern:/<!--(?:(?!<!--)[\s\S])*?-->/,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",(function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&amp;/,"&"))})),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^<!\[CDATA\[|\]\]>$/i;var t={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:s}};t["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var n={};n[a]={pattern:RegExp("(<__[^>]*>)(?:<!\\[CDATA\\[(?:[^\\]]|\\](?!\\]>))*\\]\\]>|(?!<!\\[CDATA\\[)[^])*?(?=</__>)".replace(/__/g,(function(){return a})),"i"),lookbehind:!0,greedy:!0,inside:t},Prism.languages.insertBefore("markup","cdata",n)}}),Object.defineProperty(Prism.languages.markup.tag,"addAttribute",{value:function(a,e){Prism.languages.markup.tag.inside["special-attr"].push({pattern:RegExp("(^|[\"'\\s])(?:"+a+")\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))","i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[e,"language-"+e],inside:Prism.languages[e]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml;
-        !function(s){var e=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:RegExp("@[\\w-](?:[^;{\\s\"']|\\s+(?!\\s)|"+e.source+")*?(?:;|(?=\\s*\\{))"),inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+e.source+"|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+e.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+e.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:e,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),t.tag.addAttribute("style","css"))}(Prism);
-        Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,boolean:/\b(?:false|true)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/};
-        Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp("(^|[^\\w$])(?:NaN|Infinity|0[bB][01]+(?:_[01]+)*n?|0[oO][0-7]+(?:_[0-7]+)*n?|0[xX][\\dA-Fa-f]+(?:_[\\dA-Fa-f]+)*n?|\\d+(?:_\\d+)*n|(?:\\d+(?:_\\d+)*(?:\\.(?:\\d+(?:_\\d+)*)?)?|\\.\\d+(?:_\\d+)*)(?:[Ee][+-]?\\d+(?:_\\d+)*)?)(?![\\w$])"),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp("((?:^|[^$\\w\\xA0-\\uFFFF.\"'\\])\\s]|\\b(?:return|yield))\\s*)/(?:(?:\\[(?:[^\\]\\\\\r\n]|\\\\.)*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}|(?:\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.)*\\])*\\])*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}v[dgimyus]{0,7})(?=(?:\\s|/\\*(?:[^*]|\\*(?!/))*\\*/)*(?:$|[\r\n,.;:})\\]]|//))"),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),Prism.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute("on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)","javascript")),Prism.languages.js=Prism.languages.javascript;
-        !function(e){e.languages.typescript=e.languages.extend("javascript",{"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|type)\s+)(?!keyof\b)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?:\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,lookbehind:!0,greedy:!0,inside:null},builtin:/\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/}),e.languages.typescript.keyword.push(/\b(?:abstract|declare|is|keyof|readonly|require)\b/,/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,/\btype\b(?=\s*(?:[\{*]|$))/),delete e.languages.typescript.parameter,delete e.languages.typescript["literal-property"];var s=e.languages.extend("typescript",{});delete s["class-name"],e.languages.typescript["class-name"].inside=s,e.languages.insertBefore("typescript","function",{decorator:{pattern:/@[$\w\xA0-\uFFFF]+/,inside:{at:{pattern:/^@/,alias:"operator"},function:/^[\s\S]+/}},"generic-function":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,greedy:!0,inside:{function:/^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:s}}}}),e.languages.ts=e.languages.typescript}(Prism);
-        !function(){if("undefined"!=typeof Prism&&"undefined"!=typeof document){Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector);var t={js:"javascript",py:"python",rb:"ruby",ps1:"powershell",psm1:"powershell",sh:"bash",bat:"batch",h:"c",tex:"latex"},e="data-src-status",i='pre[data-src]:not([data-src-status="loaded"]):not([data-src-status="loading"])';Prism.hooks.add("before-highlightall",(function(t){t.selector+=", "+i})),Prism.hooks.add("before-sanity-check",(function(a){var n=a.element;if(n.matches(i)){a.code="",n.setAttribute(e,"loading");var s=n.appendChild(document.createElement("CODE"));s.textContent="Loading…";var r=n.getAttribute("data-src"),l=a.language;if("none"===l){var o=(/\.(\w+)$/.exec(r)||[,"none"])[1];l=t[o]||o}Prism.util.setLanguage(s,l),Prism.util.setLanguage(n,l);var h=Prism.plugins.autoloader;h&&h.loadLanguages(l),function(t,i,a){var r=new XMLHttpRequest;r.open("GET",t,!0),r.onreadystatechange=function(){4==r.readyState&&(r.status<400&&r.responseText?function(t){n.setAttribute(e,"loaded");var i=function(t){var e=/^\s*(\d+)\s*(?:(,)\s*(?:(\d+)\s*)?)?$/.exec(t||"");if(e){var i=Number(e[1]),a=e[2],n=e[3];return a?n?[i,Number(n)]:[i,void 0]:[i,i]}}(n.getAttribute("data-range"));if(i){var a=t.split(/\r\n?|\n/g),r=i[0],l=null==i[1]?a.length:i[1];r<0&&(r+=a.length),r=Math.max(0,Math.min(r-1,a.length)),l<0&&(l+=a.length),l=Math.max(0,Math.min(l,a.length)),t=a.slice(r,l).join("\n"),n.hasAttribute("data-start")||n.setAttribute("data-start",String(r+1))}s.textContent=t,Prism.highlightElement(s)}(r.responseText):r.status>=400?a("✖ Error "+r.status+" while fetching file: "+r.statusText):a("✖ Error: File does not exist or is empty"))},r.send(null)}(r,0,(function(t){n.setAttribute(e,"failed"),s.textContent=t}))}})),Prism.plugins.fileHighlight={highlight:function(t){for(var e,a=(t||document).querySelectorAll(i),n=0;e=a[n++];)Prism.highlightElement(e)}};var a=!1;Prism.fileHighlight=function(){a||(console.warn("Prism.fileHighlight is deprecated. Use `Prism.plugins.fileHighlight.highlight` instead."),a=!0),Prism.plugins.fileHighlight.highlight.apply(this,arguments)}}}();
+var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(e){var n=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,r={},a={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof i?new i(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function e(n,t){var r,i;switch(t=t||{},a.util.type(n)){case"Object":if(i=a.util.objId(n),t[i])return t[i];for(var l in r={},t[i]=r,n)n.hasOwnProperty(l)&&(r[l]=e(n[l],t));return r;case"Array":return i=a.util.objId(n),t[i]?t[i]:(r=[],t[i]=r,n.forEach((function(n,a){r[a]=e(n,t)})),r);default:return n}},getLanguage:function(e){for(;e;){var t=n.exec(e.className);if(t)return t[1].toLowerCase();e=e.parentElement}return"none"},setLanguage:function(e,t){e.className=e.className.replace(RegExp(n,"gi"),""),e.classList.add("language-"+t)},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(r){var e=(/at [^(\r\n]*\((.*):[^:]+:[^:]+\)$/i.exec(r.stack)||[])[1];if(e){var n=document.getElementsByTagName("script");for(var t in n)if(n[t].src==e)return n[t]}return null}},isActive:function(e,n,t){for(var r="no-"+n;e;){var a=e.classList;if(a.contains(n))return!0;if(a.contains(r))return!1;e=e.parentElement}return!!t}},languages:{plain:r,plaintext:r,text:r,txt:r,extend:function(e,n){var t=a.util.clone(a.languages[e]);for(var r in n)t[r]=n[r];return t},insertBefore:function(e,n,t,r){var i=(r=r||a.languages)[e],l={};for(var o in i)if(i.hasOwnProperty(o)){if(o==n)for(var s in t)t.hasOwnProperty(s)&&(l[s]=t[s]);t.hasOwnProperty(o)||(l[o]=i[o])}var u=r[e];return r[e]=l,a.languages.DFS(a.languages,(function(n,t){t===u&&n!=e&&(this[n]=l)})),l},DFS:function e(n,t,r,i){i=i||{};var l=a.util.objId;for(var o in n)if(n.hasOwnProperty(o)){t.call(n,o,n[o],r||o);var s=n[o],u=a.util.type(s);"Object"!==u||i[l(s)]?"Array"!==u||i[l(s)]||(i[l(s)]=!0,e(s,t,o,i)):(i[l(s)]=!0,e(s,t,null,i))}}},plugins:{},highlightAll:function(e,n){a.highlightAllUnder(document,e,n)},highlightAllUnder:function(e,n,t){var r={callback:t,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};a.hooks.run("before-highlightall",r),r.elements=Array.prototype.slice.apply(r.container.querySelectorAll(r.selector)),a.hooks.run("before-all-elements-highlight",r);for(var i,l=0;i=r.elements[l++];)a.highlightElement(i,!0===n,r.callback)},highlightElement:function(n,t,r){var i=a.util.getLanguage(n),l=a.languages[i];a.util.setLanguage(n,i);var o=n.parentElement;o&&"pre"===o.nodeName.toLowerCase()&&a.util.setLanguage(o,i);var s={element:n,language:i,grammar:l,code:n.textContent};function u(e){s.highlightedCode=e,a.hooks.run("before-insert",s),s.element.innerHTML=s.highlightedCode,a.hooks.run("after-highlight",s),a.hooks.run("complete",s),r&&r.call(s.element)}if(a.hooks.run("before-sanity-check",s),(o=s.element.parentElement)&&"pre"===o.nodeName.toLowerCase()&&!o.hasAttribute("tabindex")&&o.setAttribute("tabindex","0"),!s.code)return a.hooks.run("complete",s),void(r&&r.call(s.element));if(a.hooks.run("before-highlight",s),s.grammar)if(t&&e.Worker){var c=new Worker(a.filename);c.onmessage=function(e){u(e.data)},c.postMessage(JSON.stringify({language:s.language,code:s.code,immediateClose:!0}))}else u(a.highlight(s.code,s.grammar,s.language));else u(a.util.encode(s.code))},highlight:function(e,n,t){var r={code:e,grammar:n,language:t};if(a.hooks.run("before-tokenize",r),!r.grammar)throw new Error('The language "'+r.language+'" has no grammar.');return r.tokens=a.tokenize(r.code,r.grammar),a.hooks.run("after-tokenize",r),i.stringify(a.util.encode(r.tokens),r.language)},tokenize:function(e,n){var t=n.rest;if(t){for(var r in t)n[r]=t[r];delete n.rest}var a=new s;return u(a,a.head,e),o(e,a,n,a.head,0),function(e){for(var n=[],t=e.head.next;t!==e.tail;)n.push(t.value),t=t.next;return n}(a)},hooks:{all:{},add:function(e,n){var t=a.hooks.all;t[e]=t[e]||[],t[e].push(n)},run:function(e,n){var t=a.hooks.all[e];if(t&&t.length)for(var r,i=0;r=t[i++];)r(n)}},Token:i};function i(e,n,t,r){this.type=e,this.content=n,this.alias=t,this.length=0|(r||"").length}function l(e,n,t,r){e.lastIndex=n;var a=e.exec(t);if(a&&r&&a[1]){var i=a[1].length;a.index+=i,a[0]=a[0].slice(i)}return a}function o(e,n,t,r,s,g){for(var f in t)if(t.hasOwnProperty(f)&&t[f]){var h=t[f];h=Array.isArray(h)?h:[h];for(var d=0;d<h.length;++d){if(g&&g.cause==f+","+d)return;var v=h[d],p=v.inside,m=!!v.lookbehind,y=!!v.greedy,k=v.alias;if(y&&!v.pattern.global){var x=v.pattern.toString().match(/[imsuy]*$/)[0];v.pattern=RegExp(v.pattern.source,x+"g")}for(var b=v.pattern||v,w=r.next,A=s;w!==n.tail&&!(g&&A>=g.reach);A+=w.value.length,w=w.next){var E=w.value;if(n.length>e.length)return;if(!(E instanceof i)){var P,L=1;if(y){if(!(P=l(b,A,e,m))||P.index>=e.length)break;var S=P.index,O=P.index+P[0].length,j=A;for(j+=w.value.length;S>=j;)j+=(w=w.next).value.length;if(A=j-=w.value.length,w.value instanceof i)continue;for(var C=w;C!==n.tail&&(j<O||"string"==typeof C.value);C=C.next)L++,j+=C.value.length;L--,E=e.slice(A,j),P.index-=A}else if(!(P=l(b,0,E,m)))continue;S=P.index;var N=P[0],_=E.slice(0,S),M=E.slice(S+N.length),W=A+E.length;g&&W>g.reach&&(g.reach=W);var z=w.prev;if(_&&(z=u(n,z,_),A+=_.length),c(n,z,L),w=u(n,z,new i(f,p?a.tokenize(N,p):N,k,N)),M&&u(n,w,M),L>1){var I={cause:f+","+d,reach:W};o(e,n,t,w.prev,A,I),g&&I.reach>g.reach&&(g.reach=I.reach)}}}}}}function s(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function u(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function c(e,n,t){for(var r=n.next,a=0;a<t&&r!==e.tail;a++)r=r.next;n.next=r,r.prev=n,e.length-=a}if(e.Prism=a,i.stringify=function e(n,t){if("string"==typeof n)return n;if(Array.isArray(n)){var r="";return n.forEach((function(n){r+=e(n,t)})),r}var i={type:n.type,content:e(n.content,t),tag:"span",classes:["token",n.type],attributes:{},language:t},l=n.alias;l&&(Array.isArray(l)?Array.prototype.push.apply(i.classes,l):i.classes.push(l)),a.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=" "+s+'="'+(i.attributes[s]||"").replace(/"/g,"&quot;")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+o+">"+i.content+"</"+i.tag+">"},!e.document)return e.addEventListener?(a.disableWorkerMessageHandler||e.addEventListener("message",(function(n){var t=JSON.parse(n.data),r=t.language,i=t.code,l=t.immediateClose;e.postMessage(a.highlight(i,a.languages[r],r)),l&&e.close()}),!1),a):a;var g=a.util.currentScript();function f(){a.manual||a.highlightAll()}if(g&&(a.filename=g.src,g.hasAttribute("data-manual")&&(a.manual=!0)),!a.manual){var h=document.readyState;"loading"===h||"interactive"===h&&g&&g.defer?document.addEventListener("DOMContentLoaded",f):window.requestAnimationFrame?window.requestAnimationFrame(f):window.setTimeout(f,16)}return a}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
+Prism.languages.markup={comment:{pattern:/<!--(?:(?!<!--)[\s\S])*?-->/,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",(function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&amp;/,"&"))})),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^<!\[CDATA\[|\]\]>$/i;var t={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:s}};t["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var n={};n[a]={pattern:RegExp("(<__[^>]*>)(?:<!\\[CDATA\\[(?:[^\\]]|\\](?!\\]>))*\\]\\]>|(?!<!\\[CDATA\\[)[^])*?(?=</__>)".replace(/__/g,(function(){return a})),"i"),lookbehind:!0,greedy:!0,inside:t},Prism.languages.insertBefore("markup","cdata",n)}}),Object.defineProperty(Prism.languages.markup.tag,"addAttribute",{value:function(a,e){Prism.languages.markup.tag.inside["special-attr"].push({pattern:RegExp("(^|[\"'\\s])(?:"+a+")\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))","i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[e,"language-"+e],inside:Prism.languages[e]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml;
+!function(s){var e=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:RegExp("@[\\w-](?:[^;{\\s\"']|\\s+(?!\\s)|"+e.source+")*?(?:;|(?=\\s*\\{))"),inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+e.source+"|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+e.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+e.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:e,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),t.tag.addAttribute("style","css"))}(Prism);
+Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,boolean:/\b(?:false|true)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/};
+Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp("(^|[^\\w$])(?:NaN|Infinity|0[bB][01]+(?:_[01]+)*n?|0[oO][0-7]+(?:_[0-7]+)*n?|0[xX][\\dA-Fa-f]+(?:_[\\dA-Fa-f]+)*n?|\\d+(?:_\\d+)*n|(?:\\d+(?:_\\d+)*(?:\\.(?:\\d+(?:_\\d+)*)?)?|\\.\\d+(?:_\\d+)*)(?:[Ee][+-]?\\d+(?:_\\d+)*)?)(?![\\w$])"),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp("((?:^|[^$\\w\\xA0-\\uFFFF.\"'\\])\\s]|\\b(?:return|yield))\\s*)/(?:(?:\\[(?:[^\\]\\\\\r\n]|\\\\.)*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}|(?:\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.)*\\])*\\])*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}v[dgimyus]{0,7})(?=(?:\\s|/\\*(?:[^*]|\\*(?!/))*\\*/)*(?:$|[\r\n,.;:})\\]]|//))"),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),Prism.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute("on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)","javascript")),Prism.languages.js=Prism.languages.javascript;
+!function(t){var n=t.util.clone(t.languages.javascript),e="(?:\\{<S>*\\.{3}(?:[^{}]|<BRACES>)*\\})";function a(t,n){return t=t.replace(/<S>/g,(function(){return"(?:\\s|//.*(?!.)|/\\*(?:[^*]|\\*(?!/))\\*/)"})).replace(/<BRACES>/g,(function(){return"(?:\\{(?:\\{(?:\\{[^{}]*\\}|[^{}])*\\}|[^{}])*\\})"})).replace(/<SPREAD>/g,(function(){return e})),RegExp(t,n)}e=a(e).source,t.languages.jsx=t.languages.extend("markup",n),t.languages.jsx.tag.pattern=a("</?(?:[\\w.:-]+(?:<S>+(?:[\\w.:$-]+(?:=(?:\"(?:\\\\[^]|[^\\\\\"])*\"|'(?:\\\\[^]|[^\\\\'])*'|[^\\s{'\"/>=]+|<BRACES>))?|<SPREAD>))*<S>*/?)?>"),t.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/,t.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/,t.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,t.languages.jsx.tag.inside.comment=n.comment,t.languages.insertBefore("inside","attr-name",{spread:{pattern:a("<SPREAD>"),inside:t.languages.jsx}},t.languages.jsx.tag),t.languages.insertBefore("inside","special-attr",{script:{pattern:a("=<BRACES>"),alias:"language-javascript",inside:{"script-punctuation":{pattern:/^=(?=\{)/,alias:"punctuation"},rest:t.languages.jsx}}},t.languages.jsx.tag);var s=function(t){return t?"string"==typeof t?t:"string"==typeof t.content?t.content:t.content.map(s).join(""):""},g=function(n){for(var e=[],a=0;a<n.length;a++){var o=n[a],i=!1;if("string"!=typeof o&&("tag"===o.type&&o.content[0]&&"tag"===o.content[0].type?"</"===o.content[0].content[0].content?e.length>0&&e[e.length-1].tagName===s(o.content[0].content[1])&&e.pop():"/>"===o.content[o.content.length-1].content||e.push({tagName:s(o.content[0].content[1]),openedBraces:0}):e.length>0&&"punctuation"===o.type&&"{"===o.content?e[e.length-1].openedBraces++:e.length>0&&e[e.length-1].openedBraces>0&&"punctuation"===o.type&&"}"===o.content?e[e.length-1].openedBraces--:i=!0),(i||"string"==typeof o)&&e.length>0&&0===e[e.length-1].openedBraces){var r=s(o);a<n.length-1&&("string"==typeof n[a+1]||"plain-text"===n[a+1].type)&&(r+=s(n[a+1]),n.splice(a+1,1)),a>0&&("string"==typeof n[a-1]||"plain-text"===n[a-1].type)&&(r=s(n[a-1])+r,n.splice(a-1,1),a--),n[a]=new t.Token("plain-text",r,null,r)}o.content&&"string"!=typeof o.content&&g(o.content)}};t.hooks.add("after-tokenize",(function(t){"jsx"!==t.language&&"tsx"!==t.language||g(t.tokens)}))}(Prism);
+!function(e){e.languages.typescript=e.languages.extend("javascript",{"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|type)\s+)(?!keyof\b)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?:\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,lookbehind:!0,greedy:!0,inside:null},builtin:/\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/}),e.languages.typescript.keyword.push(/\b(?:abstract|declare|is|keyof|readonly|require)\b/,/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,/\btype\b(?=\s*(?:[\{*]|$))/),delete e.languages.typescript.parameter,delete e.languages.typescript["literal-property"];var s=e.languages.extend("typescript",{});delete s["class-name"],e.languages.typescript["class-name"].inside=s,e.languages.insertBefore("typescript","function",{decorator:{pattern:/@[$\w\xA0-\uFFFF]+/,inside:{at:{pattern:/^@/,alias:"operator"},function:/^[\s\S]+/}},"generic-function":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,greedy:!0,inside:{function:/^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:s}}}}),e.languages.ts=e.languages.typescript}(Prism);
+!function(e){var a=e.util.clone(e.languages.typescript);e.languages.tsx=e.languages.extend("jsx",a),delete e.languages.tsx.parameter,delete e.languages.tsx["literal-property"];var t=e.languages.tsx.tag;t.pattern=RegExp("(^|[^\\w$]|(?=</))(?:"+t.pattern.source+")",t.pattern.flags),t.lookbehind=!0}(Prism);
+!function(){if("undefined"!=typeof Prism&&"undefined"!=typeof document){Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector);var t={js:"javascript",py:"python",rb:"ruby",ps1:"powershell",psm1:"powershell",sh:"bash",bat:"batch",h:"c",tex:"latex"},e="data-src-status",i='pre[data-src]:not([data-src-status="loaded"]):not([data-src-status="loading"])';Prism.hooks.add("before-highlightall",(function(t){t.selector+=", "+i})),Prism.hooks.add("before-sanity-check",(function(a){var n=a.element;if(n.matches(i)){a.code="",n.setAttribute(e,"loading");var s=n.appendChild(document.createElement("CODE"));s.textContent="Loading…";var r=n.getAttribute("data-src"),l=a.language;if("none"===l){var o=(/\.(\w+)$/.exec(r)||[,"none"])[1];l=t[o]||o}Prism.util.setLanguage(s,l),Prism.util.setLanguage(n,l);var h=Prism.plugins.autoloader;h&&h.loadLanguages(l),function(t,i,a){var r=new XMLHttpRequest;r.open("GET",t,!0),r.onreadystatechange=function(){4==r.readyState&&(r.status<400&&r.responseText?function(t){n.setAttribute(e,"loaded");var i=function(t){var e=/^\s*(\d+)\s*(?:(,)\s*(?:(\d+)\s*)?)?$/.exec(t||"");if(e){var i=Number(e[1]),a=e[2],n=e[3];return a?n?[i,Number(n)]:[i,void 0]:[i,i]}}(n.getAttribute("data-range"));if(i){var a=t.split(/\r\n?|\n/g),r=i[0],l=null==i[1]?a.length:i[1];r<0&&(r+=a.length),r=Math.max(0,Math.min(r-1,a.length)),l<0&&(l+=a.length),l=Math.max(0,Math.min(l,a.length)),t=a.slice(r,l).join("\n"),n.hasAttribute("data-start")||n.setAttribute("data-start",String(r+1))}s.textContent=t,Prism.highlightElement(s)}(r.responseText):r.status>=400?a("✖ Error "+r.status+" while fetching file: "+r.statusText):a("✖ Error: File does not exist or is empty"))},r.send(null)}(r,0,(function(t){n.setAttribute(e,"failed"),s.textContent=t}))}})),Prism.plugins.fileHighlight={highlight:function(t){for(var e,a=(t||document).querySelectorAll(i),n=0;e=a[n++];)Prism.highlightElement(e)}};var a=!1;Prism.fileHighlight=function(){a||(console.warn("Prism.fileHighlight is deprecated. Use `Prism.plugins.fileHighlight.highlight` instead."),a=!0),Prism.plugins.fileHighlight.highlight.apply(this,arguments)}}}();
     </script>
     <style>
         pre[class*="language-"], code[class*="language-"] {color: #24292f;font-size: 13px;text-shadow: none;font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;direction: ltr;text-align: left;white-space: pre;word-spacing: normal;word-break: normal;line-height: 1.5;-moz-tab-size: 4;-o-tab-size: 4;tab-size: 4;-webkit-hyphens: none;-moz-hyphens: none;-ms-hyphens: none;hyphens: none;}pre[class*="language-"]::selection, code[class*="language-"]::selection, pre[class*="language-"]::mozselection, code[class*="language-"]::mozselection {text-shadow: none;background: #9fc6e9;}@media print {pre[class*="language-"], code[class*="language-"] {text-shadow: none;}}pre[class*="language-"] {padding: 1.5em;margin: 0;overflow: auto; width: 100%;}:not(pre) > code[class*="language-"] {padding: .1em .3em;border-radius: .3em;color: #24292f;background: #eff1f3;}pre[data-line] {position: relative;}pre[class*="language-"] > code[class*="language-"] {position: relative;z-index: 1;}.line-highlight {position: absolute;left: 0;right: 0;padding: inherit 0;margin-top: 1em;background: #fff8c5;box-shadow: inset 5px 0 0 #eed888;z-index: 0;pointer-events: none;line-height: inherit;white-space: pre;}.namespace {opacity: .7;}.token.comment, .token.prolog, .token.doctype, .token.cdata {color: #6e7781;}.token.punctuation {color: #24292f;}.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted {color: #0550ae;}.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {color: #0a3069;}.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string {color: #0550ae;}.token.atrule, .token.attr-value, .token.keyword {color: #cf222e;}.token.function {color: #8250df;}.token.regex, .token.important, .token.variable {color: #0a3069;}.token.important, .token.bold {font-weight: bold;}.token.italic {font-style: italic;}.token.entity {cursor: help;}
@@ -105,13 +118,13 @@ permalink: /samples/{{ sample.fileSlug }}/highlight/highlight.html
             <div class="ContentSnippet-module--code-snippet">
                 <div class="CodeSnippet-module--header CodeSnippet-module--header--multilang">
                     <div class="CodeSnippet-module--header-buttons">
-                        <div role="tab" data-tab-lang="typescript" class="CodeSnippet-module--language"
+                        <div role="tab" data-tab-lang="{{ts_highlight}}" class="CodeSnippet-module--language"
                              id="settings-typescript"
                              active="">
                             <div class="CodeSnippet-module--language-selector" role="button">TypeScript</div>
                         </div>
 
-                        <div role="tab" data-tab-lang="javascript" class="CodeSnippet-module--language"
+                        <div role="tab" data-tab-lang="{{js_highlight}}" class="CodeSnippet-module--language"
                              id="settings-javascript">
                             <div class="CodeSnippet-module--language-selector" role="button">JavaScript</div>
                         </div>
@@ -141,11 +154,11 @@ permalink: /samples/{{ sample.fileSlug }}/highlight/highlight.html
                     </div>
                 </div>
                 <div class="CodeSnippet-module--snippets-multilang">
-                    <div class="CodeSnippet-module--snippets-wrap" data-snippet-lang="typescript" active>
-                        <pre data-src="./index.ts"></pre>
+                    <div class="CodeSnippet-module--snippets-wrap" data-snippet-lang="{{ts_highlight}}" active>
+                        <pre data-src="./index.{{ts_extension}}"></pre>
                     </div>
-                    <div class="CodeSnippet-module--snippets-wrap" data-snippet-lang="javascript">
-                        <pre data-src="./index.js"></pre>
+                    <div class="CodeSnippet-module--snippets-wrap" data-snippet-lang="{{js_highlight}}">
+                        <pre data-src="./index.{{js_extension}}"></pre>
                     </div>
                     <div class="CodeSnippet-module--snippets-wrap" data-snippet-lang="css">
                         <pre data-src="./style.css"></pre>
diff --git a/samples/react-map-with-localities/index.tsx b/samples/react-map-with-localities/index.tsx
index be644fa2..fb59b842 100644
--- a/samples/react-map-with-localities/index.tsx
+++ b/samples/react-map-with-localities/index.tsx
@@ -54,7 +54,7 @@ const WoosmapMap: React.FC<MapProps> = ({ center, zoom, children }) => {
   const [mapInstance, setMapInstance] = useState<woosmap.map.Map>(null);
 
   useEffect(() => {
-    if (mapRef.current) {
+    if (mapRef.current && !mapInstance) {
       const map = new woosmap.map.Map(mapRef.current, {
         zoom,
         center,
@@ -75,10 +75,15 @@ const WoosmapMap: React.FC<MapProps> = ({ center, zoom, children }) => {
 const Marker: React.FC<woosmap.map.MarkerOptions> = ({ position }) => {
   const woosmap = useContext(MapContext);
   const mapInstance = useContext(MapInstanceContext);
+  const [marker, setMarker] = useState<woosmap.map.Marker>(null);
 
   useEffect(() => {
-    if (mapInstance) {
-      const marker = new woosmap.map.Marker({
+    if (marker) {
+      marker.setMap(null);
+      setMarker(null);
+    }
+    if (mapInstance && position) {
+      const localityMarker = new woosmap.map.Marker({
         position,
         icon: {
           url: "https://images.woosmap.com/marker.png",
@@ -88,21 +93,118 @@ const Marker: React.FC<woosmap.map.MarkerOptions> = ({ position }) => {
           },
         },
       });
-      marker.setMap(mapInstance);
+      localityMarker.setMap(mapInstance);
+      setMarker(localityMarker);
+      mapInstance.flyTo({ center: position, zoom: 8 });
     }
   }, [woosmap, position, mapInstance]);
 
   return null;
 };
 
+interface LocalitiesAutocompleteProps {
+  onLocalitySelect: (
+    localityDetails: woosmap.map.localities.LocalitiesDetailsResult,
+  ) => void;
+}
+
+const LocalitiesAutocomplete: React.FC<LocalitiesAutocompleteProps> = ({
+  onLocalitySelect,
+}) => {
+  const woosmap = useContext(MapContext);
+  const [inputValue, setInputValue] = useState("");
+  const [suggestions, setSuggestions] = useState([]);
+  const localitiesService = useRef(null);
+
+  useEffect(() => {
+    localitiesService.current = new woosmap.map.LocalitiesService();
+
+    const fetchSuggestions = async () => {
+      if (inputValue && inputValue.length > 0) {
+        const suggestions: woosmap.map.localities.LocalitiesAutocompleteResponse =
+          await localitiesService.current.autocomplete({
+            input: inputValue,
+            types: ["locality", "address", "postal_code"],
+          });
+        setSuggestions(suggestions.localities || []);
+      } else {
+        setSuggestions([]);
+      }
+    };
+    fetchSuggestions();
+  }, [woosmap, inputValue]);
+
+  const handleSuggestionClick = async (
+    suggestion: woosmap.map.localities.LocalitiesPredictions,
+  ) => {
+    const localityDetails = await localitiesService.current.getDetails({
+      publicId: suggestion.public_id,
+    });
+    onLocalitySelect(localityDetails);
+    setInputValue(localityDetails.formatted_address);
+  };
+
+  const handleClearSearch = () => {
+    setInputValue("");
+    setSuggestions([]);
+  };
+
+  return (
+    <div id="autocomplete-container">
+      <svg className="search-icon" viewBox="0 0 16 16">
+        <path
+          d="M3.617 7.083a4.338 4.338 0 1 1 8.676 0 4.338 4.338 0 0 1-8.676 0m4.338-5.838a5.838 5.838 0 1 0 2.162 11.262l2.278 2.279a1 1 0 0 0 1.415-1.414l-1.95-1.95A5.838 5.838 0 0 0 7.955 1.245"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+        ></path>
+      </svg>
+      <input
+        id="autocomplete-input"
+        value={inputValue}
+        onChange={(e) => setInputValue(e.target.value)}
+        placeholder="Search for a place"
+      />
+      <button onClick={handleClearSearch} className="clear-searchButton">
+        Clear
+      </button>
+      {suggestions.length > 0 && (
+        <ul id="suggestions-list" className="visible">
+          {suggestions.map((suggestion) => (
+            <li
+              key={suggestion.publicId}
+              onClick={() => handleSuggestionClick(suggestion)}
+            >
+              {suggestion.description}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
 const App: React.VFC = () => {
-  const position: woosmap.map.LatLngLiteral = { lat: 61.2176, lng: -149.8997 };
+  const initialPosition: woosmap.map.LatLngLiteral = {
+    lat: 50.2176,
+    lng: -0.8997,
+  };
+  const [selectedLocality, setSelectedLocality] =
+    useState<woosmap.map.LatLngLiteral>(null);
+
+  const handleLocalitySelect = (
+    localityDetails: woosmap.map.localities.LocalitiesDetailsResponse,
+  ) => {
+    if (localityDetails.result.geometry?.location) {
+      setSelectedLocality(localityDetails.result.geometry.location);
+    }
+  };
 
   return (
     <APIProvider apiKey={"YOUR_API_KEY"}>
-      <WoosmapMap center={position} zoom={10}>
-        <Marker position={position} />
+      <WoosmapMap center={initialPosition} zoom={4}>
+        <Marker position={selectedLocality} />
       </WoosmapMap>
+      <LocalitiesAutocomplete onLocalitySelect={handleLocalitySelect} />
     </APIProvider>
   );
 };
diff --git a/samples/react-map-with-localities/style.scss b/samples/react-map-with-localities/style.scss
index 2d9df9c4..9f631c8f 100644
--- a/samples/react-map-with-localities/style.scss
+++ b/samples/react-map-with-localities/style.scss
@@ -2,5 +2,7 @@
 
 /* [START react_map_with_localities] */
 @include meta.load-css("../../shared/scss/_default.scss");
+@include meta.load-css("../../shared/scss/_autocomplete_input.scss");
+@include meta.load-css("../../shared/scss/_autocomplete_list.scss");
 
 /* [END react_map_with_localities] */
diff --git a/shared/scss/_autocomplete_list.scss b/shared/scss/_autocomplete_list.scss
index b32f7b9b..6246f6eb 100644
--- a/shared/scss/_autocomplete_list.scss
+++ b/shared/scss/_autocomplete_list.scss
@@ -15,6 +15,10 @@
   display: none;
   overflow-y: auto;
   background-color: #fff;
+
+  &.visible {
+    display: block;
+  }
 }
 
 #suggestions-list li {
diff --git a/tsconfig.json b/tsconfig.json
index 127773bf..0c32e636 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,11 +1,11 @@
 {
   "compilerOptions": {
-    "module": "es6",
-    "target": "es6",
+    "module": "esnext",
+    "target": "esnext",
     "strict": true,
     "noImplicitAny": false,
     "lib": ["esnext", "es6", "dom", "dom.iterable"],
-    "moduleResolution": "Node",
+    "moduleResolution": "Bundler",
     "jsx": "preserve",
     "esModuleInterop": true,
     "experimentalDecorators": true

From 1ac216281e2b6ed0837833a161ff0679825e07be Mon Sep 17 00:00:00 2001
From: galela <gsimon@woosmap.com>
Date: Tue, 4 Jun 2024 15:08:26 +0200
Subject: [PATCH 4/7] fix: fixed React Map for clear search input

---
 .github/workflows/pr-to-s3.yml              |  2 +-
 samples/react-map-with-localities/index.tsx | 39 +++++++++++++++++----
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/.github/workflows/pr-to-s3.yml b/.github/workflows/pr-to-s3.yml
index 6fa56410..4837944f 100644
--- a/.github/workflows/pr-to-s3.yml
+++ b/.github/workflows/pr-to-s3.yml
@@ -5,7 +5,7 @@ on:
   workflow_dispatch:
 
 jobs:
-  push-to-s3:
+  pr-deploy:
     if: "!contains(github.event.head_commit.message, 'skip ci')"
     runs-on: ubuntu-latest
     steps:
diff --git a/samples/react-map-with-localities/index.tsx b/samples/react-map-with-localities/index.tsx
index fb59b842..fd243c1b 100644
--- a/samples/react-map-with-localities/index.tsx
+++ b/samples/react-map-with-localities/index.tsx
@@ -116,7 +116,14 @@ const LocalitiesAutocomplete: React.FC<LocalitiesAutocompleteProps> = ({
   const [suggestions, setSuggestions] = useState([]);
   const localitiesService = useRef(null);
 
+  const [shouldFetchSuggestions, setShouldFetchSuggestions] = useState(true);
+
   useEffect(() => {
+    if (!shouldFetchSuggestions) {
+      setShouldFetchSuggestions(true);
+      return;
+    }
+
     localitiesService.current = new woosmap.map.LocalitiesService();
 
     const fetchSuggestions = async () => {
@@ -141,12 +148,22 @@ const LocalitiesAutocomplete: React.FC<LocalitiesAutocompleteProps> = ({
       publicId: suggestion.public_id,
     });
     onLocalitySelect(localityDetails);
-    setInputValue(localityDetails.formatted_address);
+    setShouldFetchSuggestions(false);
+    setInputValue(suggestion.description);
+    setSuggestions([]);
   };
 
   const handleClearSearch = () => {
     setInputValue("");
     setSuggestions([]);
+    onLocalitySelect(null); // Add this line
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && suggestions.length > 0) {
+      e.preventDefault();
+      handleSuggestionClick(suggestions[0]);
+    }
   };
 
   return (
@@ -162,10 +179,18 @@ const LocalitiesAutocomplete: React.FC<LocalitiesAutocompleteProps> = ({
         id="autocomplete-input"
         value={inputValue}
         onChange={(e) => setInputValue(e.target.value)}
+        onKeyDown={handleKeyDown}
         placeholder="Search for a place"
       />
-      <button onClick={handleClearSearch} className="clear-searchButton">
-        Clear
+      <button
+        onClick={handleClearSearch}
+        className="clear-searchButton"
+        type="button"
+        style={{ display: inputValue ? "block" : "none" }}
+      >
+        <svg className="clear-icon" viewBox="0 0 24 24">
+          <path d="M7.074 5.754a.933.933 0 1 0-1.32 1.317L10.693 12l-4.937 4.929a.931.931 0 1 0 1.319 1.317l4.938-4.93 4.937 4.93a.933.933 0 0 0 1.581-.662.93.93 0 0 0-.262-.655L13.331 12l4.937-4.929a.93.93 0 0 0-.663-1.578.93.93 0 0 0-.656.261l-4.938 4.93z"></path>
+        </svg>
       </button>
       {suggestions.length > 0 && (
         <ul id="suggestions-list" className="visible">
@@ -189,13 +214,15 @@ const App: React.VFC = () => {
     lng: -0.8997,
   };
   const [selectedLocality, setSelectedLocality] =
-    useState<woosmap.map.LatLngLiteral>(null);
+    useState<woosmap.map.LatLngLiteral | null>(null);
 
   const handleLocalitySelect = (
     localityDetails: woosmap.map.localities.LocalitiesDetailsResponse,
   ) => {
-    if (localityDetails.result.geometry?.location) {
-      setSelectedLocality(localityDetails.result.geometry.location);
+    if (localityDetails) {
+      setSelectedLocality(localityDetails.result.geometry?.location);
+    } else {
+      setSelectedLocality(null);
     }
   };
 

From 9df212e4deaf0a7b43d1eb444a336aa0beaba4a4 Mon Sep 17 00:00:00 2001
From: galela <gsimon@woosmap.com>
Date: Tue, 4 Jun 2024 15:24:47 +0200
Subject: [PATCH 5/7] chore: added comments for React Map

---
 samples/react-map-with-localities/index.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/samples/react-map-with-localities/index.tsx b/samples/react-map-with-localities/index.tsx
index fd243c1b..3d1a29d1 100644
--- a/samples/react-map-with-localities/index.tsx
+++ b/samples/react-map-with-localities/index.tsx
@@ -9,10 +9,12 @@ import React, {
   useState,
 } from "react";
 
-// Define the types for the Woosmap object
+// Define the types for the global Woosmap object
 declare const woosmap: any;
 
 // Custom hook to load the Woosmap JavaScript API
+// This hook creates a script tag with the Woosmap map.js URL and appends it to the body of the document.
+// It sets the state to true when the script loads.
 function useWoosmap(apiKey: string) {
   const [isLoaded, setIsLoaded] = useState(false);
 
@@ -26,6 +28,7 @@ function useWoosmap(apiKey: string) {
   return isLoaded;
 }
 
+// Contexts for Woosmap and the map instance
 const MapContext = createContext<any>(null);
 const MapInstanceContext = createContext<woosmap.map.Map | null>(null);
 
@@ -34,6 +37,7 @@ interface APIProviderProps {
   children: React.ReactNode;
 }
 
+// This component uses the useWoosmap hook to load the Woosmap API and provides it through context.
 const APIProvider: React.FC<APIProviderProps> = ({ apiKey, children }) => {
   const isLoaded = useWoosmap(apiKey);
 
@@ -48,6 +52,7 @@ interface MapProps extends woosmap.map.MapOptions {
   children: React.ReactNode;
 }
 
+// This component creates a Woosmap map and provides it through context used by the <Marker/>
 const WoosmapMap: React.FC<MapProps> = ({ center, zoom, children }) => {
   const mapRef = useRef<HTMLDivElement>(null);
   const woosmap = useContext(MapContext);
@@ -72,6 +77,7 @@ const WoosmapMap: React.FC<MapProps> = ({ center, zoom, children }) => {
   );
 };
 
+// This component creates a Woosmap marker to display the selected locality and flyTo it
 const Marker: React.FC<woosmap.map.MarkerOptions> = ({ position }) => {
   const woosmap = useContext(MapContext);
   const mapInstance = useContext(MapInstanceContext);
@@ -108,12 +114,14 @@ interface LocalitiesAutocompleteProps {
   ) => void;
 }
 
+// This component creates an input field for searching localities and displays suggestions
 const LocalitiesAutocomplete: React.FC<LocalitiesAutocompleteProps> = ({
   onLocalitySelect,
 }) => {
   const woosmap = useContext(MapContext);
   const [inputValue, setInputValue] = useState("");
-  const [suggestions, setSuggestions] = useState([]);
+  const [suggestions, setSuggestions] =
+    useState<woosmap.map.localities.LocalitiesAutocompleteResponse>([]);
   const localitiesService = useRef(null);
 
   const [shouldFetchSuggestions, setShouldFetchSuggestions] = useState(true);
@@ -180,7 +188,7 @@ const LocalitiesAutocomplete: React.FC<LocalitiesAutocompleteProps> = ({
         value={inputValue}
         onChange={(e) => setInputValue(e.target.value)}
         onKeyDown={handleKeyDown}
-        placeholder="Search for a place"
+        placeholder="Search for a locality"
       />
       <button
         onClick={handleClearSearch}

From 39bb48746e50df9063b838baf323f370f0db3318 Mon Sep 17 00:00:00 2001
From: galela <gsimon@woosmap.com>
Date: Tue, 4 Jun 2024 15:27:20 +0200
Subject: [PATCH 6/7] fix: added tsx files to docs

---
 src/engines/typescript/sample-jsx.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/engines/typescript/sample-jsx.js b/src/engines/typescript/sample-jsx.js
index cb8444cd..63a8d021 100644
--- a/src/engines/typescript/sample-jsx.js
+++ b/src/engines/typescript/sample-jsx.js
@@ -13,6 +13,7 @@ module.exports = {
         ),
       ),
       file: [
+        "docs.tsx",
         "docs.jsx",
         "app.tsx",
         "jsfiddle.jsx",

From dc89c2d53b92ca3f0b4bb279f5b02a04a9302d03 Mon Sep 17 00:00:00 2001
From: galela <gsimon@woosmap.com>
Date: Tue, 4 Jun 2024 16:12:58 +0200
Subject: [PATCH 7/7] feat: added basic react map sample

---
 samples/react-map-basic/index.njk             |  8 ++
 samples/react-map-basic/index.tsx             | 93 +++++++++++++++++++
 samples/react-map-basic/react-map-basic.json  | 19 ++++
 samples/react-map-basic/style.scss            |  6 ++
 samples/react-map-with-localities/index.njk   |  2 +
 samples/react-map-with-localities/index.tsx   | 11 ++-
 .../react-map-with-localities.json            |  4 +-
 samples/react-map-with-localities/style.scss  |  4 +-
 8 files changed, 139 insertions(+), 8 deletions(-)
 create mode 100644 samples/react-map-basic/index.njk
 create mode 100644 samples/react-map-basic/index.tsx
 create mode 100644 samples/react-map-basic/react-map-basic.json
 create mode 100644 samples/react-map-basic/style.scss

diff --git a/samples/react-map-basic/index.njk b/samples/react-map-basic/index.njk
new file mode 100644
index 00000000..8e718738
--- /dev/null
+++ b/samples/react-map-basic/index.njk
@@ -0,0 +1,8 @@
+{% extends '../../src/_includes/layout.njk' %}
+{% block api %}
+{% endblock %}
+{% block html %}
+<!-- [START woosmap_{{ tag }}_div] -->
+<div id="root"></div>
+<!-- [END woosmap_{{ tag }}_div] -->
+{% endblock %}
\ No newline at end of file
diff --git a/samples/react-map-basic/index.tsx b/samples/react-map-basic/index.tsx
new file mode 100644
index 00000000..735b7c15
--- /dev/null
+++ b/samples/react-map-basic/index.tsx
@@ -0,0 +1,93 @@
+// [START woosmap_react_map_basic]
+import { createRoot } from "react-dom/client";
+
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+// Define the types for the global Woosmap object
+declare const woosmap: any;
+
+// Custom hook to load the Woosmap JavaScript API
+// This hook creates a script tag with the Woosmap map.js URL and appends it to the body of the document.
+// It sets the state to true when the script loads.
+function useWoosmap(apiKey: string) {
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.src = `https://sdk.woosmap.com/map/map.js?key=${apiKey}`;
+    script.onload = () => setIsLoaded(true);
+    document.body.appendChild(script);
+  }, [apiKey]);
+
+  return isLoaded;
+}
+
+// Contexts for Woosmap library
+const MapContext = createContext<any>(null);
+
+interface WoosmapAPIProviderProps {
+  apiKey: string;
+  children: React.ReactNode;
+}
+
+// This component uses the useWoosmap hook to load the Woosmap API and provides it through context.
+const WoosmapAPIProvider: React.FC<WoosmapAPIProviderProps> = ({
+  apiKey,
+  children,
+}) => {
+  const isLoaded = useWoosmap(apiKey);
+
+  if (!isLoaded) {
+    return null;
+  }
+
+  return <MapContext.Provider value={woosmap}>{children}</MapContext.Provider>;
+};
+
+// This component creates a Woosmap map and provides it through context used by the <Marker/>
+const WoosmapMap: React.FC<woosmap.map.MapOptions> = ({ center, zoom }) => {
+  const mapRef = useRef<HTMLDivElement>(null);
+  const woosmap = useContext(MapContext);
+  const [mapInstance, setMapInstance] = useState<woosmap.map.Map>(null);
+
+  useEffect(() => {
+    if (mapRef.current && !mapInstance) {
+      const map = new woosmap.map.Map(mapRef.current, {
+        zoom,
+        center,
+      });
+      setMapInstance(map);
+    }
+  }, [woosmap, zoom, center]);
+
+  return <div ref={mapRef} style={{ width: "100%", height: "100vh" }}></div>;
+};
+
+const App: React.VFC = () => {
+  const initialPosition: woosmap.map.LatLngLiteral = {
+    lat: 50.2176,
+    lng: -0.8997,
+  };
+
+  return (
+    <WoosmapAPIProvider apiKey={"YOUR_API_KEY"}>
+      <WoosmapMap center={initialPosition} zoom={4}></WoosmapMap>
+    </WoosmapAPIProvider>
+  );
+};
+
+window.addEventListener("DOMContentLoaded", () => {
+  const root = createRoot(document.getElementById("root")!);
+  root.render(<App />);
+});
+
+// [END woosmap_react_map_basic]
+let PRESERVE_COMMENT_ABOVE; // force tsc to maintain the comment above eslint-disable-line
+
+export {};
diff --git a/samples/react-map-basic/react-map-basic.json b/samples/react-map-basic/react-map-basic.json
new file mode 100644
index 00000000..1552e14e
--- /dev/null
+++ b/samples/react-map-basic/react-map-basic.json
@@ -0,0 +1,19 @@
+{
+  "title": "React Map Basic",
+  "description": "A basic Woosmap Map sample using React JS Framework",
+  "callback": "initMap",
+  "category": "React Map",
+  "tsx": true,
+  "tag": "react_map_basic",
+  "name": "react-map-basic",
+  "pagination": {
+    "data": "mode",
+    "size": 1,
+    "alias": "mode"
+  },
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "dependencies": [
+    "react",
+    "react-dom"
+  ]
+}
diff --git a/samples/react-map-basic/style.scss b/samples/react-map-basic/style.scss
new file mode 100644
index 00000000..86714c4c
--- /dev/null
+++ b/samples/react-map-basic/style.scss
@@ -0,0 +1,6 @@
+@use 'sass:meta'; // To enable @use via meta.load-css and keep comments in order
+
+/* [START woosmap_react_map_basic] */
+@include meta.load-css("../../shared/scss/_default.scss");
+
+/* [END woosmap_react_map_basic] */
diff --git a/samples/react-map-with-localities/index.njk b/samples/react-map-with-localities/index.njk
index 4376e938..8e718738 100644
--- a/samples/react-map-with-localities/index.njk
+++ b/samples/react-map-with-localities/index.njk
@@ -2,5 +2,7 @@
 {% block api %}
 {% endblock %}
 {% block html %}
+<!-- [START woosmap_{{ tag }}_div] -->
 <div id="root"></div>
+<!-- [END woosmap_{{ tag }}_div] -->
 {% endblock %}
\ No newline at end of file
diff --git a/samples/react-map-with-localities/index.tsx b/samples/react-map-with-localities/index.tsx
index 3d1a29d1..cc84741e 100644
--- a/samples/react-map-with-localities/index.tsx
+++ b/samples/react-map-with-localities/index.tsx
@@ -32,13 +32,16 @@ function useWoosmap(apiKey: string) {
 const MapContext = createContext<any>(null);
 const MapInstanceContext = createContext<woosmap.map.Map | null>(null);
 
-interface APIProviderProps {
+interface WoosmapAPIProviderProps {
   apiKey: string;
   children: React.ReactNode;
 }
 
 // This component uses the useWoosmap hook to load the Woosmap API and provides it through context.
-const APIProvider: React.FC<APIProviderProps> = ({ apiKey, children }) => {
+const WoosmapAPIProvider: React.FC<WoosmapAPIProviderProps> = ({
+  apiKey,
+  children,
+}) => {
   const isLoaded = useWoosmap(apiKey);
 
   if (!isLoaded) {
@@ -235,12 +238,12 @@ const App: React.VFC = () => {
   };
 
   return (
-    <APIProvider apiKey={"YOUR_API_KEY"}>
+    <WoosmapAPIProvider apiKey={"YOUR_API_KEY"}>
       <WoosmapMap center={initialPosition} zoom={4}>
         <Marker position={selectedLocality} />
       </WoosmapMap>
       <LocalitiesAutocomplete onLocalitySelect={handleLocalitySelect} />
-    </APIProvider>
+    </WoosmapAPIProvider>
   );
 };
 
diff --git a/samples/react-map-with-localities/react-map-with-localities.json b/samples/react-map-with-localities/react-map-with-localities.json
index 0a2de532..0c85fb48 100644
--- a/samples/react-map-with-localities/react-map-with-localities.json
+++ b/samples/react-map-with-localities/react-map-with-localities.json
@@ -1,8 +1,8 @@
 {
   "title": "React Map with Localities",
-  "description": "A basic Woosmap Map sample using React JS Framework",
+  "description": "A Woosmap Map sample with a Localities Autocomplete input using React JS Framework",
   "callback": "initMap",
-  "category": "Map Basics",
+  "category": "React Map",
   "tsx": true,
   "tag": "react_map_with_localities",
   "name": "react-map-with-localities",
diff --git a/samples/react-map-with-localities/style.scss b/samples/react-map-with-localities/style.scss
index 9f631c8f..b0e024e2 100644
--- a/samples/react-map-with-localities/style.scss
+++ b/samples/react-map-with-localities/style.scss
@@ -1,8 +1,8 @@
 @use 'sass:meta'; // To enable @use via meta.load-css and keep comments in order
 
-/* [START react_map_with_localities] */
+/* [START woosmap_react_map_with_localities] */
 @include meta.load-css("../../shared/scss/_default.scss");
 @include meta.load-css("../../shared/scss/_autocomplete_input.scss");
 @include meta.load-css("../../shared/scss/_autocomplete_list.scss");
 
-/* [END react_map_with_localities] */
+/* [END woosmap_react_map_with_localities] */