From 072fff146073a5d29e47b4b5c43985333d6e3d1a Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Tue, 8 Jul 2025 18:38:07 +0800
Subject: [PATCH] fix(core): some editor issues (#13096)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix AI-313, BS-3611

#### PR Dependency Tree


* **PR #13096** 👈

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

* **Refactor**
* Improved performance and resource management in code block
highlighting by using a shared highlighter instance across all code
blocks.
* Enhanced the text rendering component with additional reactive
capabilities.

* **Style**
* Updated the comment sidebar header with a new background color for
improved visual consistency.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../blocks/code/src/code-block-service.ts     | 41 ++++++++++++++++---
 .../blocksuite/ai/components/text-renderer.ts |  6 ++-
 .../components/comment/sidebar/style.css.ts   |  2 +-
 3 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/blocksuite/affine/blocks/code/src/code-block-service.ts b/blocksuite/affine/blocks/code/src/code-block-service.ts
index b101fe8b0..5a309cd93 100644
--- a/blocksuite/affine/blocks/code/src/code-block-service.ts
+++ b/blocksuite/affine/blocks/code/src/code-block-service.ts
@@ -19,8 +19,12 @@ import {
 export class CodeBlockHighlighter extends LifeCycleWatcher {
   static override key = 'code-block-highlighter';
 
-  private _darkThemeKey: string | undefined;
+  // Singleton highlighter instance
+  private static _sharedHighlighter: HighlighterCore | null = null;
+  private static _highlighterPromise: Promise<HighlighterCore> | null = null;
+  private static _refCount = 0;
 
+  private _darkThemeKey: string | undefined;
   private _lightThemeKey: string | undefined;
 
   highlighter$: Signal<HighlighterCore | null> = signal(null);
@@ -44,18 +48,45 @@ export class CodeBlockHighlighter extends LifeCycleWatcher {
     this.highlighter$.value = highlighter;
   };
 
+  private static async _getOrCreateHighlighter(): Promise<HighlighterCore> {
+    if (CodeBlockHighlighter._sharedHighlighter) {
+      return CodeBlockHighlighter._sharedHighlighter;
+    }
+
+    if (!CodeBlockHighlighter._highlighterPromise) {
+      CodeBlockHighlighter._highlighterPromise = createHighlighterCore({
+        engine: createOnigurumaEngine(() => getWasm),
+      }).then(highlighter => {
+        CodeBlockHighlighter._sharedHighlighter = highlighter;
+        return highlighter;
+      });
+    }
+
+    return CodeBlockHighlighter._highlighterPromise;
+  }
+
   override mounted(): void {
     super.mounted();
 
-    createHighlighterCore({
-      engine: createOnigurumaEngine(() => getWasm),
-    })
+    CodeBlockHighlighter._refCount++;
+
+    CodeBlockHighlighter._getOrCreateHighlighter()
       .then(this._loadTheme)
       .catch(console.error);
   }
 
   override unmounted(): void {
-    this.highlighter$.value?.dispose();
+    CodeBlockHighlighter._refCount--;
+
+    // Only dispose the shared highlighter when no instances are using it
+    if (
+      CodeBlockHighlighter._refCount === 0 &&
+      CodeBlockHighlighter._sharedHighlighter
+    ) {
+      CodeBlockHighlighter._sharedHighlighter.dispose();
+      CodeBlockHighlighter._sharedHighlighter = null;
+      CodeBlockHighlighter._highlighterPromise = null;
+    }
   }
 }
 
diff --git a/packages/frontend/core/src/blocksuite/ai/components/text-renderer.ts b/packages/frontend/core/src/blocksuite/ai/components/text-renderer.ts
index b60216a62..3ec05e1d8 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/text-renderer.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/text-renderer.ts
@@ -4,7 +4,7 @@ import { getViewManager } from '@affine/core/blocksuite/manager/view';
 import type { FeatureFlagService } from '@affine/core/modules/feature-flag';
 import { PeekViewProvider } from '@blocksuite/affine/components/peek';
 import { Container, type ServiceProvider } from '@blocksuite/affine/global/di';
-import { WithDisposable } from '@blocksuite/affine/global/lit';
+import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/lit';
 import { RefNodeSlotsProvider } from '@blocksuite/affine/inlines/reference';
 import {
   codeBlockWrapMiddleware,
@@ -106,7 +106,9 @@ export type TextRendererOptions = {
 };
 
 // todo: refactor it for more general purpose usage instead of AI only?
-export class TextRenderer extends WithDisposable(ShadowlessElement) {
+export class TextRenderer extends SignalWatcher(
+  WithDisposable(ShadowlessElement)
+) {
   static override styles = css`
     .ai-answer-text-editor.affine-page-viewport {
       background: transparent;
diff --git a/packages/frontend/core/src/components/comment/sidebar/style.css.ts b/packages/frontend/core/src/components/comment/sidebar/style.css.ts
index ad5715a46..a80923de3 100644
--- a/packages/frontend/core/src/components/comment/sidebar/style.css.ts
+++ b/packages/frontend/core/src/components/comment/sidebar/style.css.ts
@@ -20,7 +20,7 @@ export const header = style({
   height: '40px',
   position: 'sticky',
   top: 0,
-  backgroundColor: cssVarV2('layer/background/overlayPanel'),
+  backgroundColor: cssVarV2('layer/background/primary'),
   zIndex: 2,
 });