From 522c5ba8686d008e365aa028f428290cb1ddc3bd Mon Sep 17 00:00:00 2001
From: SkyZeroZx <73321943+SkyZeroZx@users.noreply.github.com>
Date: Wed, 28 Jan 2026 23:53:21 -0500
Subject: [PATCH] docs(docs-infra): ensure code preview copy preserves spaces

Preserve whitespace when copying code examples from the docs. Fixes the copy handler so copied snippets keep original spacing.

Fixes #66790
---
 .../api-gen/rendering/entities/renderables.mts         |  6 ++----
 .../api-gen/rendering/templates/cli-reference.tsx      | 10 +++-------
 .../pipeline/api-gen/rendering/test/cli.spec.mts       |  4 ++--
 .../api-gen/rendering/transforms/cli-transforms.mts    |  9 +++++++--
 4 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/adev/shared-docs/pipeline/api-gen/rendering/entities/renderables.mts b/adev/shared-docs/pipeline/api-gen/rendering/entities/renderables.mts
index bbfeb216375..13b7f61b9ed 100644
--- a/adev/shared-docs/pipeline/api-gen/rendering/entities/renderables.mts
+++ b/adev/shared-docs/pipeline/api-gen/rendering/entities/renderables.mts
@@ -167,11 +167,9 @@ export type CliCommandRenderable = CliCommand & {
   htmlDescription: string;
   cards: CliCardRenderable[];
   argumentsLabel: string;
-  hasOptions: boolean;
+  optionsLabel: string;
   subcommands?: CliCommandRenderable[];
 };
 
 export interface InitializerApiFunctionRenderable
-  extends Omit<InitializerApiFunctionEntry, 'jsdocTags'>,
-    DocEntryRenderable,
-    HasRenderableToc {}
+  extends Omit<InitializerApiFunctionEntry, 'jsdocTags'>, DocEntryRenderable, HasRenderableToc {}
diff --git a/adev/shared-docs/pipeline/api-gen/rendering/templates/cli-reference.tsx b/adev/shared-docs/pipeline/api-gen/rendering/templates/cli-reference.tsx
index ac87bd4673c..842212a39aa 100644
--- a/adev/shared-docs/pipeline/api-gen/rendering/templates/cli-reference.tsx
+++ b/adev/shared-docs/pipeline/api-gen/rendering/templates/cli-reference.tsx
@@ -26,19 +26,15 @@ export function CliCommandReference(entry: CliCommandRenderable) {
               <code>
                 <div className={'shiki line cli'}>
                   ng {commandName(entry, command)}
-                  {entry.argumentsLabel ? (
+                  {entry.argumentsLabel && (
                     <button member-id={'Arguments'} className="shiki-ln-line-argument">
                       {entry.argumentsLabel}
                     </button>
-                  ) : (
-                    <></>
                   )}
-                  {entry.hasOptions ? (
+                  {entry.optionsLabel && (
                     <button member-id={'Options'} className="shiki-ln-line-option">
-                      [options]
+                      {entry.optionsLabel}
                     </button>
-                  ) : (
-                    <></>
                   )}
                 </div>
               </code>
diff --git a/adev/shared-docs/pipeline/api-gen/rendering/test/cli.spec.mts b/adev/shared-docs/pipeline/api-gen/rendering/test/cli.spec.mts
index 4ee84ecdc6f..b020e9eacc6 100644
--- a/adev/shared-docs/pipeline/api-gen/rendering/test/cli.spec.mts
+++ b/adev/shared-docs/pipeline/api-gen/rendering/test/cli.spec.mts
@@ -40,7 +40,7 @@ describe('CLI docs to html', () => {
     const cliTocs = fragment.querySelectorAll('.docs-reference-cli-toc')!;
     expect(cliTocs.length).toBe(2);
 
-    expect(cliTocs[0].textContent).toContain('ng component[name][options]');
-    expect(cliTocs[1].textContent).toContain('ng c[name][options]');
+    expect(cliTocs[0].textContent).toContain('ng component [name] [options]');
+    expect(cliTocs[1].textContent).toContain('ng c [name] [options]');
   });
 });
diff --git a/adev/shared-docs/pipeline/api-gen/rendering/transforms/cli-transforms.mts b/adev/shared-docs/pipeline/api-gen/rendering/transforms/cli-transforms.mts
index 97049aa117e..27482929638 100644
--- a/adev/shared-docs/pipeline/api-gen/rendering/transforms/cli-transforms.mts
+++ b/adev/shared-docs/pipeline/api-gen/rendering/transforms/cli-transforms.mts
@@ -27,7 +27,7 @@ export function getCliRenderable(command: CliCommand): CliCommandRenderable {
     }),
     cards: getCliCardsRenderable(command),
     argumentsLabel: getArgumentsLabel(command),
-    hasOptions: getOptions(command).length > 0,
+    optionsLabel: getOptionsLabel(command),
   };
 }
 
@@ -66,7 +66,12 @@ function getArgumentsLabel(command: CliCommand): string {
   if (args.length === 0) {
     return '';
   }
-  return command.command.replace(`${command.name} `, '');
+  const label = command.command.replace(/^ng\s+/, '').replace(`${command.name} `, '');
+  return ` ${label}`;
+}
+
+function getOptionsLabel(command: CliCommand): string {
+  return getOptions(command).length > 0 ? ' [options]' : '';
 }
 
 function getArgs(command: CliCommand): CliOption[] {