fix: add explict key to Fragment in createHighlight to prevent React unique key warnings (#18)

* fix: add key to lineToken fragment createHighlight

* test: add test covering code view with language highlight rules

* chore: import highlight rules in test from lib

Author: akoreman

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

@@ -1,8 +1,9 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { cleanup, render } from "@testing-library/react";
+import { cleanup, getByText, render } from "@testing-library/react";
 import { afterEach, describe, expect, test } from "vitest";
 import CodeView from "../../../lib/components/code-view";
+import typescriptHighlightRules from "../../../lib/components/code-view/highlight/typescript";
 import styles from "../../../lib/components/code-view/styles.css.js";
 import createWrapper from "../../../lib/components/test-utils/dom";
 
@@ -58,4 +59,16 @@ describe("CodeView", () => {
     const wrapper = createWrapper().findCodeView()!;
     expect(wrapper!.findContent().getElement().innerHTML).toContain('class="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();
+
+    // 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");
+  });
 });

src/code-view/highlight/index.tsx

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import type { Ace } from "ace-code";
 import { tokenize } from "ace-code/src/ext/simple_tokenizer";
+import { Fragment } from "react";
 import "ace-code/styles/theme/cloud_editor.css";
 import "ace-code/styles/theme/cloud_editor_dark.css";
 
@@ -10,8 +11,8 @@ export function createHighlight(rules: Ace.HighlightRules) {
     const tokens = tokenize(code, rules);
     return (
       <span>
-        {tokens.map((lineTokens) => (
-          <>
+        {tokens.map((lineTokens, lineIndex) => (
+          <Fragment key={lineIndex}>
             {lineTokens.map((token, tokenIndex) => {
               return token.className ? (
                 <span className={token?.className} key={tokenIndex}>
@@ -22,7 +23,7 @@ export function createHighlight(rules: Ace.HighlightRules) {
               );
             })}
             {"\n"}
-          </>
+          </Fragment>
         ))}
       </span>
     );