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

package.json

@@ -143,7 +143,7 @@
   "size-limit": [
     {
       "path": "lib/components/index.js",
-      "limit": "0.5kb"
+      "limit": "508b"
     },
     {
       "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

@@ -14,6 +14,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}
+          lineWrapping={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,40 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { SpaceBetween } from "@cloudscape-design/components";
+import { CodeView } from "../../lib/components";
+import { ScreenshotArea } from "../screenshot-area";
+export default function CodeViewPage() {
+  return (
+    <ScreenshotArea>
+      <h1>Code View</h1>
+      <SpaceBetween direction="vertical" size="l">
+        No wrapping, no line numbers
+        <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.`}
+        />
+        No wrapping, line numbers
+        <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.`}
+        />
+        Wrapping, no line numbers
+        <CodeView
+          lineWrapping={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.`}
+        />
+        Wrapping, line numbers
+        <CodeView
+          lineWrapping={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.`}
+        />
+        <CodeView
+          lineWrapping={true}
+          lineNumbers={true}
+          content={`public class HelloWorld {\n    public static void main(String[] args) {\n        System.out.println("Hello, World!");\n    }\n}`}
+        />
+      </SpaceBetween>
+    </ScreenshotArea>
+  );
+}

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

@@ -28,7 +28,7 @@ exports[`definition for code-view matches the snapshot > code-view 1`] = `
       "description": "A function to perform custom syntax highlighting.",
       "name": "highlight",
       "optional": true,
-      "type": "(code: string) => React.ReactNode",
+      "type": "(code: string) => ReactElement",
     },
     {
       "description": "Controls the display of line numbers.
@@ -38,6 +38,14 @@ Defaults to \`false\`.
       "optional": true,
       "type": "boolean",
     },
+    {
+      "description": "Controls lines wrap when overflowing on the right side.
+Defaults to \`false\`.
+",
+      "name": "lineWrapping",
+      "optional": true,
+      "type": "boolean",
+    },
   ],
   "regions": [
     {

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

@@ -11,10 +11,24 @@ 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()[0].getElement()).toHaveTextContent("Hello World");
+  });
+
+  test("correctly renders multi line content", () => {
+    const content = `# Hello World\n\nThis is a markdown example.`;
+
+    render(<CodeView content={content}></CodeView>);
+    const wrapper = createWrapper()!.findCodeView();
+    const contentElements = wrapper!.findContent();
+    expect(contentElements.length).toEqual(3);
+    const renderedContent = contentElements
+      .map((element) => element.getElement().textContent)
+      .join("")
+      .trim();
+    expect(renderedContent).toBe(content);
   });
 
   test("correctly renders copy button slot", () => {
@@ -26,7 +40,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", () => {
@@ -57,18 +73,39 @@ describe("CodeView", () => {
       ></CodeView>
     );
     const wrapper = createWrapper().findCodeView()!;
-    expect(wrapper!.findContent().getElement().innerHTML).toContain('class="tokenized"');
+    expect(wrapper!.findContent()[0].getElement().innerHTML).toContain("tokenized");
   });
 
   test("correctly tokenizes content if highlight is set to language rules", () => {
     render(<CodeView content={'const hello: string = "world";'} highlight={typescriptHighlightRules}></CodeView>);
     const wrapper = createWrapper().findCodeView()!;
-    const element = wrapper!.findContent().getElement();
+    const element = wrapper!.findContent()[0].getElement();
 
     // Check that the content is tokenized following typescript rules.
     expect(getByText(element, "const")).toHaveClass("ace_type");
     expect(getByText(element, "hello")).toHaveClass("ace_identifier");
     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()[0].getElement();
+    expect(element.outerHTML).toContain("code-line-nowrap");
+  });
+
+  test("sets nowrap class to line if linesWrapping false", () => {
+    render(<CodeView lineWrapping={false} content={"Hello World"}></CodeView>);
+    const wrapper = createWrapper().findCodeView()!;
+    const element = wrapper!.findContent()[0].getElement();
+    expect(element.outerHTML).toContain("code-line-nowrap");
+  });
+
+  test("sets wrap class to line if linesWrapping true", () => {
+    render(<CodeView lineWrapping={true} content={"Hello World"}></CodeView>);
+    const wrapper = createWrapper().findCodeView()!;
+    const element = wrapper!.findContent()[0].getElement();
+    expect(element.outerHTML).toContain("code-line-wrap");
+  });
 });

src/code-view/highlight/index.tsx

@@ -6,7 +6,9 @@ import { Fragment } from "react";
 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.ReactElement;
+
+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 lines wrap when overflowing on the right side.
+   *
+   * Defaults to `false`.
+   */
+  lineWrapping?: boolean;
+
   /**
    * An optional slot to display a button to enable users to perform actions, such as copy or download the code snippet.
    *
@@ -34,5 +41,5 @@ export interface CodeViewProps {
    * A function to perform custom syntax highlighting.
    *
    */
-  highlight?: (code: string) => React.ReactNode;
+  highlight?: (code: string) => React.ReactElement;
 }

src/code-view/internal.tsx

@@ -4,69 +4,102 @@ import { useCurrentMode } from "@cloudscape-design/component-toolkit/internal";
 import Box from "@cloudscape-design/components/box";
 import clsx from "clsx";
 import { useRef } from "react";
+import { Children } from "react";
 import { InternalBaseComponentProps, getBaseProps } from "../internal/base-component/use-base-component";
 import { CodeViewProps } from "./interfaces";
 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,
+  lineWrapping,
   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 elements of the content.
+  const code = highlight ? highlight(content) : textHighlight(content);
+
   return (
     <div
-      className={styles.root}
+      className={clsx(darkMode ? ACE_CLASSES.dark : ACE_CLASSES.light, styles.root)}
       {...regionProps}
       {...baseProps}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledby}
       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={styles["line-numbers"]} aria-hidden={true}>
-              {getLineNumbers(content).map((number) => (
-                <span key={number}>{number}</span>
-              ))}
-            </div>
-          )}
-        </Box>
-        <pre
-          ref={preRef}
+      <div className={styles["scroll-container"]}>
+        <table
           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"],
+            lineWrapping && 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(code.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(
+                          code.props.className,
+                          lineWrapping ? styles["code-line-wrap"] : styles["code-line-nowrap"]
+                        )}
+                      >
+                        {child}
+                      </span>
+                    </Box>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
       </div>
+      {actions && <div className={styles.actions}>{actions}</div>}
     </div>
   );
 }