WIP

src/components/codeBlock.tsx

@@ -13,36 +13,38 @@ import {CodeContext, createOrgAuthToken} from './codeContext';
 
 const KEYWORDS_REGEX = /\b___(?:([A-Z_][A-Z0-9_]*)\.)?([A-Z_][A-Z0-9_]*)___\b/g;
 
-const ORG_AUTH_TOKEN_REGEX = /__ORG_AUTH_TOKEN__/g;
+const ORG_AUTH_TOKEN_REGEX = /___ORG_AUTH_TOKEN___/g;
+
+type ChildrenItem = ReturnType<typeof Children.toArray>[number] | React.ReactNode;
 
 function makeKeywordsClickable(children: React.ReactNode) {
   const items = Children.toArray(children);
 
-  return items.reduce((arr: any[], child) => {
+  return items.reduce((arr: ChildrenItem[], child) => {
     if (typeof child !== 'string') {
       arr.push(child);
       return arr;
     }
 
-    if (KEYWORDS_REGEX.test(child)) {
-      makeProjectKeywordsClickable(arr, child);
-    } else if (ORG_AUTH_TOKEN_REGEX.test(child)) {
+    if (ORG_AUTH_TOKEN_REGEX.test(child)) {
       makeOrgAuthTokenClickable(arr, child);
+    } else if (KEYWORDS_REGEX.test(child)) {
+      makeProjectKeywordsClickable(arr, child);
     } else {
       arr.push(child);
     }
 
     return arr;
-  }, []);
+  }, [] as ChildrenItem[]);
 }
 
-function makeOrgAuthTokenClickable(arr: any[], str: string) {
+function makeOrgAuthTokenClickable(arr: ChildrenItem[], str: string) {
   runRegex(arr, str, ORG_AUTH_TOKEN_REGEX, lastIndex => (
     <OrgAuthTokenCreator key={`org-token-${lastIndex}`} />
   ));
 }
 
-function makeProjectKeywordsClickable(arr: any[], str: string) {
+function makeProjectKeywordsClickable(arr: ChildrenItem[], str: string) {
   runRegex(arr, str, KEYWORDS_REGEX, (lastIndex, match) => (
     <KeywordSelector
       key={`project-keyword-${lastIndex}`}
@@ -54,7 +56,7 @@ function makeProjectKeywordsClickable(arr: any[], str: string) {
 }
 
 function runRegex(
-  arr: any[],
+  arr: ChildrenItem[],
   str: string,
   regex: RegExp,
   cb: (lastIndex: number, match: any[]) => React.ReactNode
@@ -143,14 +145,14 @@ function OrgAuthTokenCreator() {
 
   return (
     <KeywordDropdown onClick={updateToken}>
-        {tokenState === 'none'
-          ? 'Click to generate token'
-          : tokenState === 'loading'
-          ? 'Generating...'
-          : token
-          ? token
-          : 'Error generating token'}
-      </KeywordDropdown>
+      {tokenState === 'none'
+        ? 'Click to generate token'
+        : tokenState === 'loading'
+        ? 'Generating...'
+        : token
+        ? token
+        : 'Error generating token'}
+    </KeywordDropdown>
   );
 }
 
@@ -400,7 +402,7 @@ const ItemButton = styled('button')<{isActive: boolean}>`
   `}
 `;
 
-function CodeWrapper(props) {
+export function CodeWrapper(props) {
   const {children, class: className, ...rest} = props;
 
   return (

src/platform-includes/sourcemaps/upload/webpack/javascript.mdx

@@ -43,7 +43,7 @@ SENTRY_ORG=___ORG_SLUG___
 SENTRY_PROJECT=___PROJECT_SLUG___
 # Auth tokens can be obtained from
 # https://sentry.io/settings/auth-tokens/
-SENTRY_AUTH_TOKEN=__ORG_AUTH_TOKEN__
+SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___
 ```
 
 And the following Webpack config: