chore(code-placeholders): Support path-like patterns:

- Assigns the match expression to a data attribute (data-id) to use in eleement selection. Previously, it assigned the regex expression to input.id and used the ID to select the element when updating the placeholder value. A regex that starts with a slash causes an error; input#/path/to/match isn't a valid id.
- Supports placeholders like '\/path\/to\/file.parquet'
- Refactors code-placeholders to the component pattern.

assets/js/code-placeholders.js

@@ -1,30 +1,52 @@
-const placeholderWrapper = '.code-placeholder-wrapper';
+import $ from 'jquery';
+
 const placeholderElement = 'var.code-placeholder';
 const editIcon = "<span class='code-placeholder-edit-icon cf-icon Pencil'></span>";
 
 // When clicking a placeholder, append the edit input
-function handleClick(element) {
+function handleClick($element) {
-  $(element).on('click', function() {
+  const $placeholder = $($element).find(placeholderElement);
+  $placeholder.on('click', function() {
     var placeholderData = $(this)[0].dataset;
-    var placeholderID = placeholderData.codeVar;
+    var placeholderID = placeholderData.codeVarEscaped;
     var placeholderValue = placeholderData.codeVarValue;
-    var placeholderInputWrapper = $('<div class="code-input-wrapper"></div>');
-    var placeholderInput = `<input class="placeholder-edit" id="${placeholderID}" value="${placeholderValue}" spellcheck=false onblur="submitPlaceholder($(this))" oninput="updateInputWidth($(this))" onkeydown="closeOnEnter($(this)[0], event)"></input>`;
 
-    $(this).before(placeholderInputWrapper)
+    const placeholderInput = document.createElement('input');
-    $(this).siblings('.code-input-wrapper').append(placeholderInput);
+    placeholderInput.setAttribute('class', 'placeholder-edit');
-    $(`input#${placeholderID}`).width(`${placeholderValue.length}ch`);
+    placeholderInput.setAttribute('data-id', placeholderID);
-    $(`input#${placeholderID}`).focus().select();
+    placeholderInput.setAttribute('data-code-var-escaped', placeholderID);
-    $(this).css('opacity', 0);
+    placeholderInput.setAttribute('value', placeholderValue);
+    placeholderInput.setAttribute('spellcheck', 'false');
+    
+    placeholderInput.addEventListener('blur', function() {
+      submitPlaceholder($(this));
+    }
+    );
+    placeholderInput.addEventListener('input', function() {
+      updateInputWidth($(this));
+    }
+    );
+    placeholderInput.addEventListener('keydown', function(event) {
+      closeOnEnter($(this)[0], event);
+    }
+    );
+
+    const placeholderInputWrapper = $('<div class="code-input-wrapper"></div>');
+    $placeholder.before(placeholderInputWrapper)
+    $placeholder.siblings('.code-input-wrapper').append(placeholderInput);
+    $(`input[data-code-var-escaped="${placeholderID}"]`).width(`${placeholderValue.length}ch`);
+    document.querySelector(`input[data-code-var-escaped="${placeholderID}"]`).focus();
+    document.querySelector(`input[data-code-var-escaped="${placeholderID}"]`).select();
+    $placeholder.css('opacity', 0);
   });
 }
 
 function submitPlaceholder(placeholderInput) {
-  var placeholderID = placeholderInput.attr('id');
+  var placeholderID = placeholderInput.attr('data-code-var-escaped');
   var placeholderValue = placeholderInput[0].value;
-  var placeholderInput = $(`input.placeholder-edit#${placeholderID}`);
+  placeholderInput = $(`input.placeholder-edit[data-id="${placeholderID}"]`);
 
-  $(`*[data-code-var='${placeholderID}']`).each(function() {
+  $(`*[data-code-var="${placeholderID}"]`).each(function() {
     $(this).attr('data-code-var-value', placeholderValue);
     $(this).html(placeholderValue + editIcon);
     $(this).css('opacity', 1);
@@ -44,13 +66,7 @@ function closeOnEnter(input, event) {
   }
 }
 
-function CodePlaceholder({element}) {
+export default function CodePlaceholder({ component }) {
-  handleClick(element);
+  const $component = $(component);
-}
+  handleClick($component);
-
+}
-$(function() {
-  const codePlaceholders = $(placeholderElement);
-  codePlaceholders.each(function() {
-    CodePlaceholder({element: this});
-  });
-});

assets/js/main.js

@@ -39,6 +39,7 @@ import * as v3Wayfinding from './v3-wayfinding.js';
  * The JavaScript is ideally a single-purpose module that exports a single default function to initialize the component and handle any component interactions.
  */
 import AskAITrigger from './ask-ai-trigger.js';
+import CodePlaceholder from './code-placeholders.js';
 import { CustomTimeTrigger } from './custom-timestamps.js';
 import { SearchButton } from './search-button.js';
 import { SidebarToggle } from './sidebar-toggle.js';
@@ -97,6 +98,10 @@ document.addEventListener('DOMContentLoaded', function () {
         AskAITrigger({ component });
         window.influxdatadocs[componentName] = AskAITrigger;
         break;
+      case 'code-placeholder':
+        CodePlaceholder({ component });
+        window.influxdatadocs[componentName] = CodePlaceholder;
+        break;
       case 'custom-time-trigger':
         CustomTimeTrigger({ component });
         window.influxdatadocs[componentName] = CustomTimeTrigger;

layouts/partials/footer/javascript.html

@@ -7,12 +7,10 @@
 {{ $fluxGroupKeys := resources.Get "js/flux-group-keys.js" }}
 {{ $dateTime := resources.Get "js/datetime.js" }}
 {{ $homepageInteractions := resources.Get "js/home-interactions.js" }}
-{{ $codePlaceholders := resources.Get "/js/code-placeholders.js" }}
 {{ $releaseTOC := resources.Get "/js/release-toc.js" }}
 {{ $footerjs := slice $versionSelector $searchInteractions $listFilters $featureCallouts $keybindings $homepageInteractions | resources.Concat "js/footer.bundle.js" | resources.Fingerprint }}
 {{ $fluxGroupKeyjs := $fluxGroupKeys | resources.Fingerprint }}
 {{ $dateTimejs := $dateTime | resources.Fingerprint }}
-{{ $codePlaceholdersjs := $codePlaceholders | resources.Fingerprint }}
 {{ $releaseTOCjs := $releaseTOC | resources.Fingerprint }}
 
 <!-- Load cloudUrls array -->
@@ -50,11 +48,6 @@
 <script type="text/javascript" src="{{ $dateTimejs.RelPermalink }}"></script>
 {{ end }}
 
-<!-- Load code placeholders js when code-placeholders shortcode is present -->
-{{ if .Page.HasShortcode "code-placeholders" }}
-<script type="text/javascript" src="{{ $codePlaceholdersjs.RelPermalink }}"></script>
-{{ end }}
-
 <!-- Load code release-toc js when release-toc shortcode is present -->
 {{ if .Page.HasShortcode "release-toc" }}
 <script type="text/javascript" src="{{ $releaseTOCjs.RelPermalink }}"></script>