Merge branch 'next-release/main' into next-release-main-into-dev

cspell.json

@@ -879,6 +879,7 @@
     "region",
     "myapp.xcodeproj",
     "myapp",
+    "myapplication",
     "mybucket",
     "mycognitoresource",
     "mycoolpassword",
@@ -1018,6 +1019,7 @@
     "posts.graphql",
     "PostsTable",
     "posttitle",
+    "powertools",
     "pre-annotated",
     "pre-built",
     "pre-created",
@@ -1046,6 +1048,7 @@
     "pubsub",
     "Pubsub",
     "PubSub",
+    "Powertools",
     "PUSHINFOPROVIDER",
     "PushListenerService",
     "pushnotification",
@@ -1576,12 +1579,20 @@
     "multirepo",
     "startbuild"
   ],
-  "flagWords": ["hte", "full-stack", "Full-stack", "Full-Stack", "sudo"],
+  "flagWords": [
+    "hte",
+    "full-stack",
+    "Full-stack",
+    "Full-Stack",
+    "sudo"
+  ],
   "patterns": [
     {
       "name": "youtube-embed-ids",
       "pattern": "/embedId=\".*\" /"
     }
   ],
-  "ignoreRegExpList": ["youtube-embed-ids"]
+  "ignoreRegExpList": [
+    "youtube-embed-ids"
+  ]
 }

src/components/MDXComponents/MDXCode.tsx

@@ -30,6 +30,18 @@ const addVersions = (code: string) => {
   return code;
 };
 
+const hasHighlights = (code: string): boolean => {
+  const highlightableStrings = [
+    '// highlight-start',
+    '// highlight-end',
+    '// highlight-next-line'
+  ];
+  if (highlightableStrings.some((highlight) => code.includes(highlight))) {
+    return true;
+  }
+  return false;
+};
+
 export const MDXCode = ({
   codeString,
   language = 'js',
@@ -39,7 +51,7 @@ export const MDXCode = ({
   title
 }: MDXCodeProps) => {
   const [code, setCode] = useState(codeString);
-  const shouldShowCopy = language !== 'console';
+  const shouldShowCopy = language !== 'console' && !hasHighlights(codeString);
   const shouldShowHeader = shouldShowCopy || title;
   const titleId = `${useId()}-titleID`;
   const codeId = `${useId()}-codeID`;

src/components/MDXComponents/MDXCopyCodeButton.tsx

@@ -2,19 +2,7 @@ import { useState } from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { Button, VisuallyHidden } from '@aws-amplify/ui-react';
 import { trackCopyClicks } from '@/utils/track';
-
-export const prepareCopyText = (codeString: string): string => {
-  // We need to strip out markdown comments from the code string
-  // so they don't show up in our copied text
-  const highlightStartText = /\/\/\s?highlight-start/g;
-  const highlightEndText = /\/\/\s?highlight-end/g;
-  const highlightNextLine = /\/\/\s?highlight-next-line/g;
-
-  return codeString
-    .replace(highlightStartText, '')
-    .replace(highlightEndText, '')
-    .replace(highlightNextLine, '');
-};
+import { prepareCopyText } from './utils/copy-code';
 
 interface MDXCopyCodeButtonProps {
   codeId: string;

src/components/MDXComponents/MDXHighlightedCopyCodeButton.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { VisuallyHidden } from '@aws-amplify/ui-react';
+import { trackCopyClicks } from '@/utils/track';
+import { prepareCopyText } from './utils/copy-code';
+
+interface MDXCopyCodeButtonProps {
+  codeId: string;
+  codeString: string;
+  testId?: string;
+  title?: string;
+  children?: React.ReactNode;
+}
+
+export const MDXHighlightedCopyCodeButton = ({
+  codeString,
+  title,
+  codeId,
+  children
+}: MDXCopyCodeButtonProps) => {
+  const [copied, setCopied] = useState(false);
+
+  const copyText = prepareCopyText(codeString);
+
+  const copy = () => {
+    trackCopyClicks(copyText);
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+  };
+  return (
+    <CopyToClipboard text={copyText} onCopy={copy}>
+      <button className="highlight-copy-block" key={codeId}>
+        {children}
+        <span className="highlight-copy-block-hint">
+          {copied ? 'Copied' : 'Copy'}
+        </span>
+        <VisuallyHidden>
+          {` `}
+          {title} highlighted code example
+        </VisuallyHidden>
+      </button>
+    </CopyToClipboard>
+  );
+};

src/components/MDXComponents/TokenList.tsx

@@ -1,5 +1,21 @@
 import type { Token } from 'prism-react-renderer';
 import type { TokenListProps } from './types';
+import { MDXHighlightedCopyCodeButton } from './MDXHighlightedCopyCodeButton';
+
+type ProcessedToken = {
+  line: Token[];
+  showLine: boolean;
+  lineNumber: number;
+};
+
+type TokenGroup =
+  | (ProcessedToken & {
+      type: 'regular';
+    })
+  | {
+      tokens: ProcessedToken[];
+      type: 'highlighted';
+    };
 
 export const TokenList = ({
   tokens,
@@ -11,7 +27,9 @@ export const TokenList = ({
   let shouldHighlight = false;
   let highlightNextIndex: number | undefined;
 
-  return tokens.map((line: Token[], i: number) => {
+  const tokenGroups: TokenGroup[] = [];
+
+  tokens.forEach((line: Token[], i: number) => {
     let showLine = true;
     lineNumber++;
 
@@ -32,7 +50,7 @@ export const TokenList = ({
     // Test if the line contains code comment for highlight-next-line
     const isHighlightNext = textLine === '//highlight-next-line';
 
-    // If hilightNextIndex was set previously in the loop,
+    // If highlightNextIndex was set previously in the loop,
     // then turn on highlight for this line
     if (highlightNextIndex && i === highlightNextIndex) {
       shouldHighlight = true;
@@ -53,6 +71,11 @@ export const TokenList = ({
       showLine = false;
       shouldHighlight = true;
       lineNumber--;
+
+      tokenGroups.push({
+        tokens: [],
+        type: 'highlighted'
+      });
     }
 
     // If this line is highlight-end, don't show this line,
@@ -73,17 +96,84 @@ export const TokenList = ({
       lineNumber--;
     }
 
-    return showLine ? (
+    if (!shouldHighlight) {
+      tokenGroups.push({
+        type: 'regular',
+        line,
+        showLine,
+        lineNumber
+      });
+    } else {
+      const lastGroup = tokenGroups[tokenGroups.length - 1];
+      let existingTokens: ProcessedToken[] = [];
+      if (lastGroup?.type === 'highlighted') {
+        existingTokens = lastGroup.tokens;
+      }
+      tokenGroups[tokenGroups.length - 1] = {
+        tokens: [
+          ...existingTokens,
+          {
+            lineNumber,
+            line,
+            showLine
+          }
+        ],
+        type: 'highlighted'
+      };
+    }
+  });
+
+  function renderProcessedToken(
+    token: ProcessedToken,
+    key: string,
+    shouldHighlight: boolean,
+    showLineNumbers: boolean = true
+  ) {
+    return token.showLine ? (
       <div
-        key={i}
-        {...getLineProps({ line })}
+        key={key}
+        {...getLineProps({ line: token.line })}
         className={`token-line${shouldHighlight ? ' line-highlight' : ''}`}
       >
-        {showLineNumbers && <span className="line-number">{lineNumber}</span>}
-        {line.map((token, key) => (
+        {showLineNumbers && (
+          <span className="line-number">{token.lineNumber}</span>
+        )}
+        {token.line.map((token, key) => (
           <span key={key} {...getTokenProps({ token })} />
         ))}
       </div>
     ) : null;
+  }
+
+  return tokenGroups.map((processedToken, i) => {
+    if (processedToken.type === 'regular') {
+      return renderProcessedToken(
+        processedToken,
+        `regular:${i}`,
+        false,
+        showLineNumbers
+      );
+    } else {
+      const highlightedCodeString = processedToken.tokens
+        .map((token) => token.line.map((line) => line.content).join(''))
+        .join('\n');
+
+      return (
+        <MDXHighlightedCopyCodeButton
+          codeId={`highlighted:${i}`}
+          key={`highlighted:${i}`}
+          codeString={highlightedCodeString}
+        >
+          {processedToken.tokens.map((token, j) => {
+            return renderProcessedToken(
+              token,
+              `highlighted:${i}:${j}`,
+              true,
+              showLineNumbers
+            );
+          })}
+        </MDXHighlightedCopyCodeButton>
+      );
+    }
   });
 };

src/components/MDXComponents/__tests__/MDXCopyCodeButton.test.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
-import { MDXCopyCodeButton, prepareCopyText } from '../MDXCopyCodeButton';
+import { MDXCopyCodeButton } from '../MDXCopyCodeButton';
 import userEvent from '@testing-library/user-event';
 import * as trackModule from '../../../utils/track';
+import { prepareCopyText } from '../utils/copy-code';
 
 const codeString = `
 import * as sns from 'aws-cdk-lib/aws-sns';

src/components/MDXComponents/utils/copy-code.ts

@@ -0,0 +1,12 @@
+export const prepareCopyText = (codeString: string): string => {
+  // We need to strip out markdown comments from the code string
+  // so they don't show up in our copied text
+  const highlightStartText = /\/\/\s?highlight-start/g;
+  const highlightEndText = /\/\/\s?highlight-end/g;
+  const highlightNextLine = /\/\/\s?highlight-next-line/g;
+
+  return codeString
+    .replace(highlightStartText, '')
+    .replace(highlightEndText, '')
+    .replace(highlightNextLine, '');
+};