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

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

@@ -0,0 +1,35 @@
+// 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.`}
+        />
+      </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

@@ -14,7 +14,7 @@ describe("CodeView", () => {
   test("correctly renders component 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 copy button slot", () => {
@@ -26,7 +26,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 +59,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

@@ -2,71 +2,84 @@
 // SPDX-License-Identifier: Apache-2.0
 import { useCurrentMode } from "@cloudscape-design/component-toolkit/internal";
 import Box from "@cloudscape-design/components/box";
+import { TextHighlightRules } from "ace-code/src/mode/text_highlight_rules";
 import clsx from "clsx";
 import { useRef } from "react";
+import { Children } from "react";
 import { InternalBaseComponentProps, getBaseProps } from "../internal/base-component/use-base-component";
+import { createHighlight } from "./highlight";
 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;
 
+const textHighlight = createHighlight(new TextHighlightRules());
+
 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}
-          className={clsx(
-            darkMode ? ACE_CLASSES.dark : ACE_CLASSES.light,
-            styles.code,
-            lineNumbers && styles["code-with-line-numbers"],
-            actions && styles["code-with-actions"]
-          )}
-        >
-          <Box color="inherit" variant="code" fontSize="body-m">
-            {code}
-          </Box>
-        </pre>
-        {actions && <div className={styles.actions}>{actions}</div>}
-      </div>
+      <table className={clsx(styles["code-table"])}>
+        <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={styles["line-number"]} aria-hidden={true}>
+                    <Box color="text-status-inactive" fontSize="body-m">
+                      {index + 1}
+                    </Box>
+                  </td>
+                )}
+                <td className={styles["code-line"]}>
+                  <Box color="text-status-inactive" 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>
+      {actions && <div className={styles.actions}>{actions}</div>}
     </div>
   );
 }

src/code-view/styles.scss

@@ -5,57 +5,51 @@ $color-background-code-view-dark: #282c34;
 
 .root {
   position: relative;
-  &-with-numbers {
-    display: flex;
-    align-items: stretch;
-  }
-}
-
-.code {
   :global(.awsui-dark-mode) &,
   :global(.awsui-polaris-dark-mode) & {
     background-color: $color-background-code-view-dark;
   }
-  &-with-line-numbers {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-    flex: 1;
-  }
-  &-with-actions {
-    min-block-size: cs.$space-scaled-xxl;
-    padding-inline-end: calc(2 * cs.$space-static-xxxl);
-    align-items: center;
-  }
   background-color: $color-background-code-view-light;
-  display: flex;
+  overflow-x: auto;
+}
+
+.code-table {
   border-start-start-radius: cs.$border-radius-tiles;
   border-start-end-radius: cs.$border-radius-tiles;
   border-end-start-radius: cs.$border-radius-tiles;
   border-end-end-radius: cs.$border-radius-tiles;
-  padding-block: cs.$space-static-xs;
-  padding-inline: cs.$space-static-xs;
-  margin-block: 0;
-  margin-inline: 0;
-  overflow: auto;
+  padding-top: cs.$space-static-xs;
+  padding-bottom: cs.$space-static-xs;
+  table-layout: auto;
+  width: 100%;
+  border-spacing: 0;
 }
 
-.line-numbers {
+.line-number {
+  border-right-color: cs.$color-border-divider-default;
   :global(.awsui-dark-mode) &,
   :global(.awsui-polaris-dark-mode) & {
     background-color: $color-background-code-view-dark;
   }
-  border-start-start-radius: cs.$border-radius-tiles;
-  border-end-start-radius: cs.$border-radius-tiles;
   background-color: $color-background-code-view-light;
-  padding-block: cs.$space-static-xs;
-  padding-inline: cs.$space-static-xs;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  border-inline-end-width: 1px;
-  border-inline-end-style: solid;
-  border-inline-end-color: cs.$color-border-divider-default;
-  justify-content: center;
+  vertical-align: text-top;
+  position: sticky;
+  left: 0;
+  border-right-width: 1px;
+  border-right-style: solid;
+  padding-left: cs.$space-static-xs;
+  padding-right: cs.$space-static-xs;
+}
+
+.code-line {
+  padding-left: cs.$space-static-xs;
+  padding-right: cs.$space-static-xs;
+  &-wrap {
+    white-space: pre-wrap;
+  }
+  &-nowrap {
+    white-space: nowrap;
+  }
 }
 
 .actions {

src/test-utils/dom/code-view/index.ts

@@ -6,8 +6,8 @@ import styles from "../../../code-view/styles.selectors.js";
 export default class CodeViewWrapper extends ComponentWrapper {
   static rootSelector: string = styles.root;
 
-  findContent(): ElementWrapper {
-    return this.findByClassName(styles.code)!;
+  findContent() {
+    return this.findAllByClassName(styles["code-line"])!;
   }
 
   findActions(): ElementWrapper | null {