feat: Add option for line-wrapping to prevent horizontal scrolling (#20)

akoreman · Ruben Carvalho · gethinwebster · web-flow · commit 5381da523b18 · 2024-12-16T18:20:43.000Z
* feat: add option for line-wrapping to prevent horizontal scrolling

* chore: remove accidentally commited npm script

* fix: make line numbers unselectable

* chore: replace Ace text highlight rules with in-repo function

* chore: Fix minimum-height and actions absolute positioning

* fix: Fix code indentation by setting white-space to pre

* chore: Fix code color and lines Box variant

* chore: Add multi-line test

* chore: Increase size-limit by 8 bytes

* chore: Use logical properties

* chore: Update findContent() test to be backward compatible

* Give &lt;table&gt; role="presentation"

* feat: add option for line-wrapping to prevent horizontal scrolling

* chore: remove accidentally commited npm script

* fix: make line numbers unselectable

* chore: replace Ace text highlight rules with in-repo function

* chore: Fix minimum-height and actions absolute positioning

* fix: Fix code indentation by setting white-space to pre

* chore: Fix code color and lines Box variant

* chore: Add multi-line test

* chore: Increase size-limit by 8 bytes

* Give &lt;table&gt; role="presentation"

* Increase size limit

* chore: increase size-limit

* small fixes after merging up to main

* small fix after merging up to main

* bump size limit

* keep test util backwards compatible

* small fixes from mistakes made while merging

* revert highlight function type to return ReactNode

* add syntax highlighting example line wrapping page

* small refactor

* wrap text on pages in Box components

* update parameter jsdoc

* update documentation snapshot

* update prop name to wrapLines

* add word break

* bump size

---------

Co-authored-by: Ruben Carvalho &lt;rucarva@amazon.de&gt;
Co-authored-by: Gethin Webster &lt;gethinw@amazon.de&gt;
Co-authored-by: Gethin Webster &lt;gethinw@amazon.com&gt;
Co-authored-by: Alice Koreman &lt;alicekor@amazon.nl&gt;
diff --git a/package.json b/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",
diff --git a/pages/code-view/simple.page.tsx b/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>
   );
 }
diff --git a/pages/code-view/with-actions-button.page.tsx b/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>
   );
diff --git a/pages/code-view/with-line-wrapping.page.tsx b/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>
+  );
+}
diff --git a/pages/code-view/with-syntax-highlighting.page.tsx b/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>
diff --git a/src/__tests__/__snapshots__/documenter.test.ts.snap b/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": [
     {
diff --git a/src/code-view/__tests__/code-view.test.tsx b/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");
+  });
 });
diff --git a/src/code-view/highlight/index.tsx b/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 (
diff --git a/src/code-view/interfaces.ts b/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.
    *
diff --git a/src/code-view/internal.tsx b/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>
   );
 }
diff --git a/src/code-view/styles.scss b/src/code-view/styles.scss
diff --git a/src/test-utils/dom/code-view/index.ts b/src/test-utils/dom/code-view/index.ts

Original file line number	Diff line number	Diff line change
`@@ -146,7 +146,7 @@`
`146`	`146`	`"size-limit": [`
`147`	`147`	`{`
`148`	`148`	`"path": "lib/components/index.js",`
`149`		`- "limit": "6.4kb"`
	`149`	`+ "limit": "6.58kb"`
`150`	`150`	`},`
`151`	`151`	`{`
`152`	`152`	`"path": "lib/components/code-view/highlight/javascript.js",`