Fix CustomizableValues in code blocks when the parser splits the markers across tokens (#2197)

* Fix CustomizableValues in code blocks when the parser splits the markers across tokens

* Move test page away from pipelines tutorials

Author: Resonance1584

docs/2.0/docs/pipelines/tutorials/test.md renamed to docs/test-customizable-value.md

@@ -5,4 +5,8 @@ import CodeBlock from '@theme/CodeBlock';
 <CustomizableValue id="test" />
 ```bash
     mkdir -p $$test$$/<region>/$$test$$/foo
+```
+
+```hcl
+"${$$test$$}"
 ```

src/theme/CodeBlock/Line/index.tsx

@@ -5,36 +5,82 @@ import { cloneElement } from 'react';
 import styles from './styles.module.css';
 import CustomizableValue from '../../../components/CustomizableValue';
 
+/**
+ * replaceCustomizeableValues takes a list of tokens and identifies customizable values
+ * marked by a start and end token, '$$'.
+ * It returns a new list of tokens with the customizable values replaced with a CustomizableValue component.
+ * If a customizable value begins or ends in the middle of a token, the token is split into two tokens.
+ */
 function replaceCustomizeableValues(tokens) {
+  // The list of tokens including the customizable value components
   let newTokens = [];
+  // A string that is being built up to capture the content of the current token, used to create a new token
   let captured = '';
-  let capturing = false;
-  for (let token of tokens) {
+  // A boolean indicating that we are currently within a customizable value
+  let withinCustomizableValue = false;
+
+  // A boolean indicating that we should skip the first character of the next token
+  let skipFirstChar = false;
+
+  // Loop over each token
+  for (let i = 0; i < tokens.length; i++) {
+    let token = tokens[i];
+    let nextToken = i < tokens.length - 1 ? tokens[i + 1] : null;
+
     let content = token.props.children;
-    for (let i = 0; i < content.length; i++) {
-      if (content[i] === '$' && i < content.length - 1 && content[i + 1] === '$') {
-        if (capturing) {
+
+    // Loop over each character in the token
+    let initialIndex = 0;
+    if (skipFirstChar) {
+      // Start the loop at 1 to skip the first character
+      initialIndex = 1;
+      skipFirstChar = false;
+    }
+
+    for (let j = initialIndex; j < content.length; j++) {
+      // The current charcter and the next character
+      // The next character may be in the next token, so we need to look ahead
+      let currentChar = content[j];
+      let nextChar = j < content.length - 1 ? content[j + 1] : null;
+      // Track if we used the next token to get the next character
+      let usedNextToken = false;
+      if (nextChar == null && nextToken != null && nextToken.props.children.length > 0) {
+        nextChar = nextToken.props.children[0];
+        usedNextToken = true;
+      }
+
+      // If the current and next characters are both '$', we have found the start or end of a customizable value
+      if (currentChar === '$' && nextChar === '$') {
+        if (withinCustomizableValue) {
+          // We have found the end of a customizable value, create a new token for the customizable value
           newTokens.push(
             <CustomizableValue
               key={captured + newTokens.length}
               id={captured}
             />
           );
-        } else {
+        } else if (captured.length > 0) {
+          // We have found the start of a customizable value, if we have captured any content, create a new token
+          // to preserve the previous content
           let newToken = cloneElement(token, {key: newTokens.length}, captured)
           newTokens.push(newToken)
         }
 
+        // Reset the captured content and toggle the withinCustomizableValue flag
         captured = '';
-        capturing = !capturing;
-        i += 2;
-        if (i >= content.length) {
+        withinCustomizableValue = !withinCustomizableValue;
+        // Skip the next two characters in this token, which will be the opening or closing $$
+        j += 2;
+        // If the marker was split across two tokens, we need to skip the first character of the next token
+        // to remove it from the output
+        skipFirstChar = usedNextToken;
+        if (j >= content.length) {
           break;
         }
       }
-      captured += content[i];
+      captured += content[j];
     }
-    if (captured.length > 0 && !capturing) {
+    if (captured.length > 0 && !withinCustomizableValue) {
       let newToken = cloneElement(token, {key: newTokens.length}, captured)
       newTokens.push(newToken)
       captured = '';