Merge pull request #12991 from CesiumGS/sandcastle-console-index

Prevent selecting console index in sandcastle

Author: mzschwartz5

packages/sandcastle/src/ConsoleMirror.css

@@ -29,11 +29,20 @@
       gap: var(--stratakit-space-x2);
       margin: var(--stratakit-space-x1);
       padding: var(--stratakit-space-x1) 0 var(--stratakit-space-x05);
+      font-family: var(--stratakit-font-family-mono);
     }
     .message + .message {
       border-top: var(--stratakit-ext-border-border) solid
         var(--stratakit-color-border-neutral-muted);
     }
+    .no-icon {
+      /* "Filler" icon to take up the same space */
+      width: 1rem;
+      height: 1rem;
+    }
+    .message-index {
+      user-select: none;
+    }
     .content {
       text-wrap: wrap;
     }

packages/sandcastle/src/ConsoleMirror.tsx

@@ -13,6 +13,16 @@ export type ConsoleMessage = {
   id: string;
 };
 
+function ConsoleIcon({ type }: { type: ConsoleMessageType }) {
+  if (type === "error") {
+    return <Icon href={statusError} />;
+  }
+  if (type === "warn") {
+    return <Icon href={statusWarning} />;
+  }
+  return <div className="no-icon"></div>;
+}
+
 export function ConsoleMirror({
   logs,
   expanded: consoleExpanded,
@@ -63,12 +73,6 @@ export function ConsoleMirror({
           </div>
         )}
         {logs.map((log, i) => {
-          let icon = "";
-          if (log.type === "warn") {
-            icon = statusWarning;
-          } else if (log.type === "error") {
-            icon = statusError;
-          }
           return (
             <div
               key={i}
@@ -77,10 +81,9 @@ export function ConsoleMirror({
                 error: log.type === "error",
               })}
             >
-              <Icon href={icon} />
-              <pre className="content">
-                {i + 1}: {log.message}
-              </pre>
+              <ConsoleIcon type={log.type} />
+              <span className="message-index">{i + 1}:</span>
+              <pre className="content">{log.message}</pre>
             </div>
           );
         })}