feat: Add option for line-wrapping to prevent horizontal scrolling

package.json

@@ -146,7 +146,7 @@
   "size-limit": [
     {
       "path": "lib/components/index.js",
-      "limit": "6.4kb"
+      "limit": "6.58kb"
     },
     {
       "path": "lib/components/code-view/highlight/javascript.js",

pages/code-view/simple.page.tsx

@@ -8,6 +8,9 @@ export default function CodeViewPage() {
     <ScreenshotArea>
       <h1>Code View</h1>
       <CodeView content={"Hello World"} />
+      <CodeView
+        content={`public class HelloWorld {\n    public static void main(String[] args) {\n        System.out.println("Hello, World!");\n    }\n}`}
+      />
     </ScreenshotArea>
   );
 }

pages/code-view/with-actions-button.page.tsx

@@ -15,6 +15,12 @@ export default function CodeViewPage() {
           actions={<Button ariaLabel="Copy code" iconName="copy"></Button>}
           content={`Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`}
         />
+        <CodeView
+          lineNumbers={true}
+          wrapLines={true}
+          actions={<Button ariaLabel="Copy code" iconName="copy"></Button>}
+          content={`Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`}
+        />
       </SpaceBetween>
     </ScreenshotArea>
   );

pages/code-view/with-line-wrapping.page.tsx

@@ -0,0 +1,51 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Box, SpaceBetween } from "@cloudscape-design/components";
+
+import { CodeView } from "../../lib/components";
+import cppHighlight from "../../lib/components/code-view/highlight/cpp";
+import { ScreenshotArea } from "../screenshot-area";
+
+export default function CodeViewPage() {
+  return (
+    <ScreenshotArea>
+      <h1>Code View</h1>
+      <SpaceBetween direction="vertical" size="l">
+        <Box>No wrapping, no line numbers</Box>
+        <CodeView
+          content={`Hello this is a short line.\nHello this is a long line. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\nHello this is another short line.`}
+        />
+        <Box>No wrapping, line numbers</Box>
+        <CodeView
+          lineNumbers={true}
+          content={`Hello this is a short line.\nHello this is a long line. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\nHello this is another short line.`}
+        />
+        <Box>Wrapping, no line numbers</Box>
+        <CodeView
+          wrapLines={true}
+          content={`Hello this is a short line.\nHello this is a long line. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\nHello this is another short line.`}
+        />
+        <Box>Wrapping, line numbers</Box>
+        <CodeView
+          wrapLines={true}
+          lineNumbers={true}
+          content={`Hello this is a short line.\nHello this is a long line. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\nHello this is another short line.`}
+        />
+        <Box>Full example with indentation and code highlighting</Box>
+        <CodeView
+          wrapLines={true}
+          lineNumbers={true}
+          highlight={cppHighlight}
+          content={`void UserQuery(map<string, vector<string> > &svmap) {\n    string queryName;\n    cout << "Please enter a family name you want to query: ";\n    cin >> queryName;\n    int i = 0;\n    for (map<string, vector<string> >::iterator itr = svmap.begin(), mapEnd = svmap.end(); itr != mapEnd; ++itr) {\n        i++;\n        if (itr->first == queryName) {\n            cout << "The " << itr->first << " family has " << itr->second.size() << " children: ";\n            for (vector<string>::iterator itrvec = itr->second.begin(), vecEnd = itr->second.end(); itrvec != vecEnd; ++itrvec)\n                cout << *itrvec << " ";\n            break;\n        }\n    }\n    if (i >= svmap.size())\n        cout << "Sorry, the " << queryName << " family is not found." << endl;\n}`}
+        />
+        <Box>Long word</Box>
+        <CodeView
+          wrapLines={true}
+          lineNumbers={true}
+          content={`LoremipsumdolorsitametconsecteturadipiscingelitCurabitursagittismetusidornarebibendumLoremipsumdolorsitametconsecteturadipiscingelitCurabitursagittismetusidornarebibendumLoremipsumdolorsitametconsecteturadipiscingelitCurabitursagittismetusidornarebibendumLoremipsumdolorsitametconsecteturadipiscingelitCurabitursagittismetusidornarebibendumLoremipsumdolorsitametconsecteturadipiscingelitCurabitursagittismetusidornarebibendumLoremipsumdolorsitametconsecteturadipiscingelitCurabitursagittismetusidornarebibendumLoremipsumdolorsitametconsecteturadipiscingelitCurabitursagittismetusidornarebibendumLoremipsumdolorsitametconsecteturadipiscingelitCurabitursagittismetusidornarebibendum`}
+        />
+      </SpaceBetween>
+    </ScreenshotArea>
+  );
+}

pages/code-view/with-syntax-highlighting.page.tsx

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { SpaceBetween } from "@cloudscape-design/components";
+import { Box, SpaceBetween } from "@cloudscape-design/components";
 
 import { CodeView } from "../../lib/components";
 import htmlHighlight from "../../lib/components/code-view/highlight/html";
@@ -23,32 +23,32 @@ export default function CodeViewPage() {
     <ScreenshotArea>
       <h1>Code View</h1>
       <SpaceBetween direction="vertical" size="l">
-        JavaScript
+        <Box>JavaScript</Box>
         <CodeView content={`const hello = "world";\nconsole.log(hello);`} highlight={javascriptHighlight} />
-        TypeScript
+        <Box>TypeScript</Box>
         <CodeView content={`let hello: string = "world";\nconsole.log(hello);`} highlight={typescriptHighlight} />
-        XML
+        <Box>XML</Box>
         <CodeView content={`<greeting>Hello, world!</greeting>`} highlight={xmlHighlight} />
-        Markdown (MDX)
+        <Box>Markdown (MDX)</Box>
         <CodeView content={`# Hello World\n\nThis is a markdown example.`} highlight={markdownHighlight} />
-        Bash (Shell Script)
+        <Box>Bash (Shell Script)</Box>
         <CodeView content={`echo "Hello, world!"`} highlight={shHighlight} />
-        CSS
+        <Box>CSS</Box>
         <CodeView content={`body { background-color: lightblue; }`} highlight={cssHighlight} />
-        HTML
+        <Box>HTML</Box>
         <CodeView content={`<h1>Hello, World!</h1>`} highlight={htmlHighlight} />
-        Java
+        <Box>Java</Box>
         <CodeView
           content={`public class HelloWorld {\n    public static void main(String[] args) {\n        System.out.println("Hello, World!");\n    }\n}`}
           highlight={javaHighlight}
         />
-        JSON
+        <Box>JSON</Box>
         <CodeView content={`{"greeting": "Hello, world!"}`} highlight={jsonHighlight} />
-        PHP
+        <Box>PHP</Box>
         <CodeView content={`<?php\necho 'Hello, world!';\n?>`} highlight={phpHighlight} />
-        Python
+        <Box>Python</Box>
         <CodeView content={`print("Hello, World!")`} highlight={pythonHighlight} />
-        YAML
+        <Box>YAML</Box>
         <CodeView content={`greeting: Hello, world!`} highlight={yamlHighlight} />
       </SpaceBetween>
     </ScreenshotArea>

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -38,6 +38,14 @@ Defaults to \`false\`.
       "optional": true,
       "type": "boolean",
     },
+    {
+      "description": "Controls whether line-wrapping is enabled when content would overflow the component.
+Defaults to \`false\`.
+",
+      "name": "wrapLines",
+      "optional": true,
+      "type": "boolean",
+    },
   ],
   "regions": [
     {

src/code-view/__tests__/code-view.test.tsx

@@ -13,10 +13,17 @@ describe("CodeView", () => {
   afterEach(() => {
     cleanup();
   });
-  test("correctly renders component content", () => {
+  test("correctly renders simple content", () => {
     render(<CodeView content={"Hello World"}></CodeView>);
     const wrapper = createWrapper()!.findCodeView();
-    expect(wrapper!.findContent().getElement().textContent).toBe("Hello World");
+    expect(wrapper!.findContent().getElement()).toHaveTextContent("Hello World");
+  });
+
+  test("correctly renders multi line content", () => {
+    render(<CodeView content={`# Hello World\n\nThis is a markdown example.`}></CodeView>);
+    const wrapper = createWrapper()!.findCodeView()!;
+    const content = wrapper.findContent();
+    expect(content.getElement()).toHaveTextContent("# Hello World This is a markdown example.");
   });
 
   test("correctly renders copy button slot", () => {
@@ -28,7 +35,9 @@ describe("CodeView", () => {
   test("correctly renders line numbers", () => {
     render(<CodeView content={`Hello\nWorld\n!`} lineNumbers={true}></CodeView>);
     const wrapper = createWrapper()!.findCodeView();
-    expect(wrapper!.findByClassName(styles["line-numbers"])!.getElement()).toHaveTextContent("123");
+    expect(wrapper!.findAllByClassName(styles["line-number"])[0]!.getElement()).toHaveTextContent("1");
+    expect(wrapper!.findAllByClassName(styles["line-number"])[1]!.getElement()).toHaveTextContent("2");
+    expect(wrapper!.findAllByClassName(styles["line-number"])[2]!.getElement()).toHaveTextContent("3");
   });
 
   test("correctly renders aria-label", () => {
@@ -59,7 +68,7 @@ describe("CodeView", () => {
       ></CodeView>,
     );
     const wrapper = createWrapper().findCodeView()!;
-    expect(wrapper!.findContent().getElement().innerHTML).toContain('class="tokenized"');
+    expect(wrapper!.findContent().getElement().innerHTML).toContain("tokenized");
   });
 
   test("correctly tokenizes content if highlight is set to language rules", () => {
@@ -73,4 +82,25 @@ describe("CodeView", () => {
     expect(getByText(element, "string")).toHaveClass("ace_type");
     expect(getByText(element, '"world"')).toHaveClass("ace_string");
   });
+
+  test("sets nowrap class to line if linesWrapping undefined", () => {
+    render(<CodeView content={"Hello World"}></CodeView>);
+    const wrapper = createWrapper().findCodeView()!;
+    const element = wrapper!.findContent().getElement();
+    expect(element.outerHTML).toContain("code-line-nowrap");
+  });
+
+  test("sets nowrap class to line if linesWrapping false", () => {
+    render(<CodeView wrapLines={false} content={"Hello World"}></CodeView>);
+    const wrapper = createWrapper().findCodeView()!;
+    const element = wrapper!.findContent().getElement();
+    expect(element.outerHTML).toContain("code-line-nowrap");
+  });
+
+  test("sets wrap class to line if linesWrapping true", () => {
+    render(<CodeView wrapLines={true} content={"Hello World"}></CodeView>);
+    const wrapper = createWrapper().findCodeView()!;
+    const element = wrapper!.findContent().getElement();
+    expect(element.outerHTML).toContain("code-line-wrap");
+  });
 });

src/code-view/highlight/index.tsx

@@ -7,7 +7,9 @@ import { tokenize } from "ace-code/src/ext/simple_tokenizer";
 import "ace-code/styles/theme/cloud_editor.css";
 import "ace-code/styles/theme/cloud_editor_dark.css";
 
-export function createHighlight(rules: Ace.HighlightRules) {
+type CreateHighlightType = (code: string) => React.ReactNode;
+
+export function createHighlight(rules: Ace.HighlightRules): CreateHighlightType {
   return (code: string) => {
     const tokens = tokenize(code, rules);
     return (

src/code-view/interfaces.ts

@@ -24,6 +24,13 @@ export interface CodeViewProps {
    */
   lineNumbers?: boolean;
 
+  /**
+   * Controls whether line-wrapping is enabled when content would overflow the component.
+   *
+   * Defaults to `false`.
+   */
+  wrapLines?: boolean;
+
   /**
    * An optional slot to display a button to enable users to perform actions, such as copy or download the code snippet.
    *

src/code-view/internal.tsx

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { useRef } from "react";
+import { Children, createElement, Fragment, ReactElement, useRef } from "react";
 import clsx from "clsx";
 
 import { useCurrentMode } from "@cloudscape-design/component-toolkit/internal";
@@ -13,67 +13,100 @@ import styles from "./styles.css.js";
 
 const ACE_CLASSES = { light: "ace-cloud_editor", dark: "ace-cloud_editor_dark" };
 
-function getLineNumbers(content: string) {
-  return content.split("\n").map((_, n) => n + 1);
-}
-
 type InternalCodeViewProps = CodeViewProps & InternalBaseComponentProps;
 
+// Breaks down the input code for non-highlighted code-view into React
+// Elements similar to how a highlight function would do.
+const textHighlight = (code: string) => {
+  const lines = code.split("\n");
+  return (
+    <span>
+      {lines.map((line, lineIndex) => (
+        <span key={lineIndex}>
+          {line}
+          {"\n"}
+        </span>
+      ))}
+    </span>
+  );
+};
+
 export function InternalCodeView({
   content,
   actions,
   lineNumbers,
+  wrapLines,
   highlight,
   ariaLabel,
   ariaLabelledby,
   __internalRootRef = null,
   ...props
 }: InternalCodeViewProps) {
-  const code = highlight ? highlight(content) : <span>{content}</span>;
   const baseProps = getBaseProps(props);
   const preRef = useRef<HTMLPreElement>(null);
   const darkMode = useCurrentMode(preRef) === "dark";
 
   const regionProps = ariaLabel || ariaLabelledby ? { role: "region" } : {};
 
+  // Create tokenized React nodes of the content.
+  const code = highlight ? highlight(content) : textHighlight(content);
+  // Create elements from the nodes.
+  const codeElementWrapper: ReactElement = createElement(Fragment, null, code);
+  const codeElement = Children.only(codeElementWrapper.props.children);
+
   return (
     <div
-      className={styles.root}
+      className={clsx(darkMode ? ACE_CLASSES.dark : ACE_CLASSES.light, styles.root)}
       {...regionProps}
       {...baseProps}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledby}
       dir="ltr"
       ref={__internalRootRef}
     >
-      <div className={clsx(lineNumbers && styles["root-with-numbers"], actions && styles["root-with-actions"])}>
-        <Box color="text-status-inactive" fontSize="body-m">
-          {lineNumbers && (
-            <div
-              className={clsx(styles["line-numbers"], actions && styles["line-numbers-with-actions"])}
-              aria-hidden={true}
-            >
-              {getLineNumbers(content).map((number) => (
-                <span key={number}>{number}</span>
-              ))}
-            </div>
-          )}
-        </Box>
-        <pre
-          ref={preRef}
+      <div className={styles["scroll-container"]}>
+        <table
+          role="presentation"
           className={clsx(
-            darkMode ? ACE_CLASSES.dark : ACE_CLASSES.light,
-            styles.code,
-            lineNumbers && styles["code-with-line-numbers"],
-            actions && styles["code-with-actions"],
+            styles["code-table"],
+            actions && styles["code-table-with-actions"],
+            wrapLines && styles["code-table-with-line-wrapping"],
           )}
         >
-          <Box color="inherit" variant="code" fontSize="body-m">
-            {code}
-          </Box>
-        </pre>
-        {actions && <div className={styles.actions}>{actions}</div>}
+          <colgroup>
+            <col style={{ width: 1 } /* shrink to fit content */} />
+            <col style={{ width: "auto" }} />
+          </colgroup>
+          <tbody>
+            {Children.map(codeElement.props.children, (child, index) => {
+              return (
+                <tr key={index}>
+                  {lineNumbers && (
+                    <td className={clsx(styles["line-number"], styles.unselectable)} aria-hidden={true}>
+                      <Box variant="code" color="text-status-inactive" fontSize="body-m">
+                        {index + 1}
+                      </Box>
+                    </td>
+                  )}
+                  <td className={styles["code-line"]}>
+                    <Box variant="code" fontSize="body-m">
+                      <span
+                        className={clsx(
+                          codeElement.props.className,
+                          wrapLines ? styles["code-line-wrap"] : styles["code-line-nowrap"],
+                        )}
+                      >
+                        {child}
+                      </span>
+                    </Box>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
       </div>
+      {actions && <div className={styles.actions}>{actions}</div>}
     </div>
   );
 }