From fbf234f9fa86135c4b4ade12a5a5db7112fa4225 Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Thu, 14 Aug 2025 12:24:28 +0800
Subject: [PATCH] fix(core): code artifact copy should retain the original
 format (#13489)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 -->
---
 .../ai/components/ai-tools/code-artifact.ts       | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/code-artifact.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-tools/code-artifact.ts
index a58f1a198..4298f086b 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/code-artifact.ts
+++ b/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>`;