diff --git a/pages/code-view/with-line-numbers.page.tsx b/pages/code-view/with-line-numbers.page.tsx index be98419..43565ff 100644 --- a/pages/code-view/with-line-numbers.page.tsx +++ b/pages/code-view/with-line-numbers.page.tsx @@ -12,6 +12,8 @@ export default function CodeViewPage() { + + ); diff --git a/src/__tests__/__snapshots__/documenter.test.ts.snap b/src/__tests__/__snapshots__/documenter.test.ts.snap index b9c601b..43b9b4b 100644 --- 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 the number the line numbers start counting from. +Defaults to \`1\`. +", + "name": "lineNumbersStart", + "optional": true, + "type": "number", + }, ], "regions": [ { diff --git a/src/code-view/__tests__/code-view.test.tsx b/src/code-view/__tests__/code-view.test.tsx index 3fc3d77..e85759d 100644 --- a/src/code-view/__tests__/code-view.test.tsx +++ b/src/code-view/__tests__/code-view.test.tsx @@ -29,6 +29,18 @@ describe("CodeView", () => { expect(wrapper!.findByClassName(styles["line-numbers"])!.getElement()).toHaveTextContent("123"); }); + test("correctly renders line numbers when lineNumbersStart is set", () => { + render(); + const wrapper = createWrapper()!.findCodeView(); + expect(wrapper!.findByClassName(styles["line-numbers"])!.getElement()).toHaveTextContent("456"); + }); + + test("correctly renders line numbers when lineNumbersStart is set to a negative value", () => { + render(); + const wrapper = createWrapper()!.findCodeView(); + expect(wrapper!.findByClassName(styles["line-numbers"])!.getElement()).toHaveTextContent("-101"); + }); + test("correctly renders aria-label", () => { render(); const wrapper = createWrapper()!.findCodeView(); diff --git a/src/code-view/interfaces.ts b/src/code-view/interfaces.ts index e6131de..bf78caf 100644 --- a/src/code-view/interfaces.ts +++ b/src/code-view/interfaces.ts @@ -24,6 +24,13 @@ export interface CodeViewProps { */ lineNumbers?: boolean; + /** + * Controls the number the line numbers start counting from. + * + * Defaults to `1`. + */ + lineNumbersStart?: number; + /** * 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 index e605bc6..95b74c5 100644 --- a/src/code-view/internal.tsx +++ b/src/code-view/internal.tsx @@ -10,8 +10,8 @@ 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); +function getLineNumbers(content: string, lineNumbersStart = 1) { + return content.split("\n").map((_, n) => lineNumbersStart + n); } type InternalCodeViewProps = CodeViewProps & InternalBaseComponentProps; @@ -20,6 +20,7 @@ export function InternalCodeView({ content, actions, lineNumbers, + lineNumbersStart, highlight, ariaLabel, ariaLabelledby, @@ -46,7 +47,7 @@ export function InternalCodeView({ {lineNumbers && (
- {getLineNumbers(content).map((number) => ( + {getLineNumbers(content, lineNumbersStart).map((number) => ( {number} ))}