@vanduo-oss/framework 1.4.2 → 1.4.4

package/js/components/code-snippet.js

@@ -69,9 +69,10 @@
       const snippets = this.queryWithin(root, '.vd-code-snippet');
 
       snippets.forEach(snippet => {
-        if (!snippet.dataset.initialized) {
-          this.initSnippet(snippet);
+        if (snippet.dataset.initialized === 'true') {
+          return;
         }
+        this.initSnippet(snippet);
       });
     },
 
@@ -80,7 +81,9 @@
      * @param {HTMLElement} snippet - Code snippet container element
      */
     initSnippet: function (snippet) {
-      snippet.dataset.initialized = 'true';
+      if (snippet.dataset.initialized === 'true') {
+        return;
+      }
       snippet._codeSnippetCleanup = [];
 
       // Handle collapsible toggle
@@ -121,6 +124,8 @@
       lineNumberPanes.forEach(pane => {
         this.addLineNumbers(pane);
       });
+
+      snippet.dataset.initialized = 'true';
     },
 
     /**
@@ -132,14 +137,15 @@
     initCollapsible: function (snippet, toggle, content) {
       // Set initial state
       const isExpanded = snippet.dataset.expanded === 'true';
-      toggle.setAttribute('aria-expanded', isExpanded);
-      content.dataset.visible = isExpanded;
+      toggle.setAttribute('aria-expanded', isExpanded ? 'true' : 'false');
+      content.dataset.visible = isExpanded ? 'true' : 'false';
 
       this.addListener(snippet, toggle, 'click', () => {
         const expanded = snippet.dataset.expanded === 'true';
-        snippet.dataset.expanded = !expanded;
-        toggle.setAttribute('aria-expanded', !expanded);
-        content.dataset.visible = !expanded;
+        const nextExpanded = !expanded;
+        snippet.dataset.expanded = nextExpanded ? 'true' : 'false';
+        toggle.setAttribute('aria-expanded', nextExpanded ? 'true' : 'false');
+        content.dataset.visible = nextExpanded ? 'true' : 'false';
 
         // Extract HTML on first expand if needed
         if (!expanded) {
@@ -566,19 +572,65 @@
      * @returns {string} HTML with syntax highlighting spans
      */
     highlightHtml: function (html) {
-      // Highlight HTML tags
-      html = html.replace(/(&lt;\/?)([\w-]+)/g, '$1<span class="code-tag">$2</span>');
+      // Comments first so tag highlighting does not treat them as elements.
+      html = html.replace(/(&lt;!--)(.*?)(--&gt;)/g, '<span class="code-comment">$1$2$3</span>');
 
-      // Highlight attributes
-      html = html.replace(/([\w-]+)(=)(["'])/g, '<span class="code-attr">$1</span>$2$3');
-      html = html.replace(/([\w-]+)(=)(&quot;|&#39;)/g, '<span class="code-attr">$1</span>$2$3');
+      // Only highlight inside escaped HTML tags. Build the highlighted tag from the
+      // original escaped source so regexes never re-process our injected spans.
+      html = html.replace(/&lt;(?!--)([\s\S]*?)&gt;/g, function (match, inner) {
+        const closingMatch = inner.match(/^(\/)([\w-]+)\s*$/);
+        if (closingMatch) {
+          return '&lt;'
+            + closingMatch[1]
+            + '<span class="code-tag">' + closingMatch[2] + '</span>'
+            + '&gt;';
+        }
 
-      // Highlight attribute values (strings)
-      html = html.replace(/(["'])([^"']*)(["'])/g, '$1<span class="code-string">$2</span>$3');
-      html = html.replace(/(&quot;|&#39;)([^&]*)(&quot;|&#39;)/g, '$1<span class="code-string">$2</span>$3');
+        const selfClosingMatch = inner.match(/(\s*\/)\s*$/);
+        const selfClosingSuffix = selfClosingMatch ? selfClosingMatch[1] : '';
+        const tagSource = selfClosingMatch
+          ? inner.slice(0, inner.length - selfClosingMatch[0].length)
+          : inner;
+        const openMatch = tagSource.match(/^([\w-]+)([\s\S]*)$/);
 
-      // Highlight comments
-      html = html.replace(/(&lt;!--)(.*?)(--&gt;)/g, '<span class="code-comment">$1$2$3</span>');
+        if (!openMatch) {
+          return match;
+        }
+
+        const tagName = openMatch[1];
+        let attrSource = openMatch[2];
+
+        attrSource = attrSource.replace(
+          /([\w:-]+)(\s*=\s*)(["'])([\s\S]*?)\3/g,
+          function (attrMatch, attrName, separator, quote, value) {
+            return '<span class="code-attr">' + attrName + '</span>'
+              + separator
+              + quote
+              + '<span class="code-string">' + value + '</span>'
+              + quote;
+          }
+        );
+
+        attrSource = attrSource.replace(
+          /([\w:-]+)(\s*=\s*)(&quot;|&#39;)([\s\S]*?)(&quot;|&#39;)/g,
+          function (attrMatch, attrName, separator, openQuote, value, closeQuote) {
+            if (openQuote !== closeQuote) {
+              return attrMatch;
+            }
+
+            return '<span class="code-attr">' + attrName + '</span>'
+              + separator
+              + openQuote
+              + '<span class="code-string">' + value + '</span>'
+              + closeQuote;
+          }
+        );
+
+        return '&lt;<span class="code-tag">' + tagName + '</span>'
+          + attrSource
+          + selfClosingSuffix
+          + '&gt;';
+      });
 
       return html;
     },
@@ -613,6 +665,20 @@
      * @returns {string} JS with syntax highlighting spans
      */
     highlightJs: function (js) {
+      const protectedTokens = [];
+      const protectToken = (value, className) => {
+        const marker = String.fromCharCode(0xE000 + protectedTokens.length);
+        protectedTokens.push({ marker, html: '<span class="' + className + '">' + value + '</span>' });
+        return marker;
+      };
+
+      // Protect comments and strings before adding markup so later passes never
+      // re-highlight attributes inside the generated spans.
+      js = js.replace(
+        /\/\*[\s\S]*?\*\/|\/\/.*$|'(?:[^'\\]|\\.){0,10000}'|"(?:[^"\\]|\\.){0,10000}"|`(?:[^`\\]|\\.){0,10000}`/gm,
+        match => protectToken(match, match.startsWith('/') ? 'code-comment' : 'code-string')
+      );
+
       // Highlight keywords
       const keywords = ['const', 'let', 'var', 'function', 'return', 'if', 'else', 'for', 'while', 'switch', 'case', 'break', 'continue', 'new', 'this', 'class', 'extends', 'import', 'export', 'default', 'async', 'await', 'try', 'catch', 'throw', 'typeof', 'instanceof'];
       keywords.forEach(kw => {
@@ -620,18 +686,15 @@
         js = js.replace(regex, '<span class="code-keyword">$1</span>');
       });
 
-      // Highlight strings (limit to 10 000 chars to prevent polynomial backtracking)
-      js = js.replace(/('(?:[^'\\]|\\.){0,10000}'|"(?:[^"\\]|\\.){0,10000}"|`(?:[^`\\]|\\.){0,10000}`)/g, '<span class="code-string">$1</span>');
-
       // Highlight numbers
       js = js.replace(/\b(\d+\.?\d*)\b/g, '<span class="code-number">$1</span>');
 
       // Highlight function calls
       js = js.replace(/\b([\w]+)(\s*\()/g, '<span class="code-function">$1</span>$2');
 
-      // Highlight comments
-      js = js.replace(/(\/\/.*$)/gm, '<span class="code-comment">$1</span>');
-      js = js.replace(/(\/\*[\s\S]*?\*\/)/g, '<span class="code-comment">$1</span>');
+      protectedTokens.forEach(token => {
+        js = js.replace(token.marker, token.html);
+      });
 
       return js;
     },

package/js/components/datepicker.js

@@ -181,6 +181,8 @@
       let focusedDate = null;
       /** Prevents focus() after close from immediately re-opening the popup */
       let skipNextFocusOpen = false;
+      /** Ignore outside-click closes briefly after open (mobile click/focus ordering). */
+      let ignoreOutsideUntil = 0;
 
       const isDisabled = (d) => {
         if (minDate) {
@@ -562,7 +564,12 @@
         positionPopup();
       };
 
+      const markIgnoreOutside = () => {
+        ignoreOutsideUntil = Date.now() + 100;
+      };
+
       const open = () => {
+        markIgnoreOutside();
         viewMode = 'days';
         if (selectedDate) {
           viewYear = selectedDate.getFullYear();
@@ -600,8 +607,25 @@
         }
         open();
       };
+      /** Mobile browsers may not focus the input before the click event (Playwright too). */
+      const clickHandler = () => {
+        if (!popup.classList.contains('is-open')) open();
+      };
+
+      const isOpenAnchorTarget = (target) => {
+        if (!target || !(target instanceof Node)) return false;
+        if (target === input || input.contains(target) || popup.contains(target)) return true;
+        const inputId = input.id;
+        if (inputId) {
+          const label = document.querySelector('label[for="' + inputId.replace(/"/g, '\\"') + '"]');
+          if (label && (target === label || label.contains(target))) return true;
+        }
+        return false;
+      };
+
       const outsideHandler = (e) => {
-        if (!input.contains(e.target) && !popup.contains(e.target)) close();
+        if (Date.now() < ignoreOutsideUntil) return;
+        if (!isOpenAnchorTarget(e.target)) close();
       };
       const escHandler = (e) => {
         if (e.key === 'Escape' && popup.classList.contains('is-open')) {
@@ -612,6 +636,7 @@
       };
 
       input.addEventListener('focus', focusHandler);
+      input.addEventListener('click', clickHandler);
       document.addEventListener('click', outsideHandler, true);
       document.addEventListener('keydown', escHandler);
       popup.addEventListener('keydown', handleGridKeydown);
@@ -624,6 +649,7 @@
 
       cleanup.push(
         () => input.removeEventListener('focus', focusHandler),
+        () => input.removeEventListener('click', clickHandler),
         () => document.removeEventListener('click', outsideHandler, true),
         () => document.removeEventListener('keydown', escHandler),
         () => popup.removeEventListener('keydown', handleGridKeydown),

package/js/components/suggest.js

@@ -6,17 +6,6 @@
 (function () {
   'use strict';
 
-  /**
-   * Escape HTML entities to prevent XSS when inserting into innerHTML
-   * @param {string} text
-   * @returns {string}
-   */
-  function _escapeHtml(text) {
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML;
-  }
-
   /**
    * Allow same-origin URLs by default, or an explicit allowlist of origins.
    * @param {string} url
@@ -109,10 +98,24 @@
 
           const text = typeof item === 'object' ? (item.label || item.text || String(item)) : String(item);
           if (query) {
-            // Escape HTML first to prevent XSS, then highlight matches in the safe string
-            const escaped = _escapeHtml(text);
-            const re = new RegExp('(' + query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'gi');
-            li.innerHTML = escaped.replace(re, '<span class="vd-suggest-match">$1</span>');
+            const lowerText = text.toLowerCase();
+            const lowerQuery = query.toLowerCase();
+            let start = 0;
+            let matchIndex = lowerText.indexOf(lowerQuery, start);
+            while (matchIndex !== -1) {
+              if (matchIndex > start) {
+                li.appendChild(document.createTextNode(text.slice(start, matchIndex)));
+              }
+              const matchSpan = document.createElement('span');
+              matchSpan.className = 'vd-suggest-match';
+              matchSpan.textContent = text.slice(matchIndex, matchIndex + query.length);
+              li.appendChild(matchSpan);
+              start = matchIndex + query.length;
+              matchIndex = lowerText.indexOf(lowerQuery, start);
+            }
+            if (start < text.length) {
+              li.appendChild(document.createTextNode(text.slice(start)));
+            }
           } else {
             li.textContent = text;
           }