fix(core): code artifact copy should retain the original format (#13489)

fix AI-415

#### PR Dependency Tree


* **PR #13489** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Improved code block stability to prevent layout shifts and overlapping
during syntax highlighting.
  * Ensured consistent height and alignment for code snippets.

* **Style**
* Refined code block appearance for clearer, more polished presentation.

* **Chores**
* Internal adjustments to support more reliable rendering of highlighted
code.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/core/src/blocksuite/ai/components/ai-tools/code-artifact.ts

@@ -49,6 +49,7 @@ export class CodeHighlighter extends SignalWatcher(WithDisposable(LitElement)) {
 
     /* Container */
     .code-highlighter pre {
+      position: relative;
       margin: 0;
       display: flex;
       overflow: auto;
@@ -73,7 +74,7 @@ export class CodeHighlighter extends SignalWatcher(WithDisposable(LitElement)) {
     }
 
     /* Code area */
-    .code-highlighter .code-container {
+    .code-highlighter :is(.code-container, .code-container-hidden) {
       flex: 1;
       white-space: pre;
       line-height: 20px;
@@ -81,6 +82,17 @@ export class CodeHighlighter extends SignalWatcher(WithDisposable(LitElement)) {
       padding: 0 12px 12px 12px;
     }
 
+    .code-highlighter .code-container {
+      user-select: none;
+    }
+
+    .code-highlighter .code-container-hidden {
+      color: transparent;
+      position: absolute;
+      top: 0;
+      left: 60px;
+    }
+
     .code-highlighter .code-line {
       display: flex;
       min-height: 20px;
@@ -209,6 +221,7 @@ export class CodeHighlighter extends SignalWatcher(WithDisposable(LitElement)) {
     return html`<div class="code-highlighter">
       <pre>
         ${lineNumbersTemplate}
+        <div class="code-container-hidden">${this.code}</div>
         <div class="code-container">${renderedCode}</div>
       </pre>
     </div>`;