From 2901d302b15fdf45e4ce480a12433bf46b40751b Mon Sep 17 00:00:00 2001
From: siam <31573022+siam-ese@users.noreply.github.com>
Date: Mon, 17 Mar 2025 20:19:57 +0800
Subject: [PATCH] chore: rename quick insert component key (#4847)

---
 .../doc-quick-insert-ui.controller.ts            | 16 ++++++++++++----
 packages/docs-quick-insert-ui/src/index.ts       |  2 ++
 .../src/views/KeywordInputPlaceholder.tsx        |  8 ++++----
 .../src/views/QuickInsertPlaceholder.tsx         |  4 ++++
 .../src/views/QuickInsertPopup.tsx               | 10 ++++------
 5 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/packages/docs-quick-insert-ui/src/controllers/doc-quick-insert-ui.controller.ts b/packages/docs-quick-insert-ui/src/controllers/doc-quick-insert-ui.controller.ts
index 1aae368fa2..0048da88a0 100644
--- a/packages/docs-quick-insert-ui/src/controllers/doc-quick-insert-ui.controller.ts
+++ b/packages/docs-quick-insert-ui/src/controllers/doc-quick-insert-ui.controller.ts
@@ -24,6 +24,7 @@ import { DeleteSearchKeyCommand } from '../commands/commands/doc-quick-insert.co
 import { CloseQuickInsertPopupOperation, ShowQuickInsertPopupOperation } from '../commands/operations/quick-insert-popup.operation';
 import { DocQuickInsertPopupService } from '../services/doc-quick-insert-popup.service';
 import { KeywordInputPlaceholder } from '../views/KeywordInputPlaceholder';
+import { QuickInsertPlaceholder } from '../views/QuickInsertPlaceholder';
 import { QuickInsertPopup } from '../views/QuickInsertPopup';
 import { builtInMenus } from './built-in-menus';
 
@@ -51,10 +52,17 @@ export class DocQuickInsertUIController extends Disposable {
     }
 
     private _initComponents() {
-        this.disposeWithMe(this._componentManager.register(QuickInsertPopup.componentKey, QuickInsertPopup));
-        this.disposeWithMe(this._componentManager.register(KeywordInputPlaceholder.componentKey, KeywordInputPlaceholder));
-        this.disposeWithMe(this._componentManager.register('DividerSingle', DividerSingle));
-        this.disposeWithMe(this._componentManager.register('TextSingle', TextSingle));
+        ([
+            [QuickInsertPopup.componentKey, QuickInsertPopup],
+            [KeywordInputPlaceholder.componentKey, KeywordInputPlaceholder],
+            [QuickInsertPlaceholder.componentKey, QuickInsertPlaceholder],
+            [DividerSingle.displayName, DividerSingle],
+            [TextSingle.displayName, TextSingle],
+        ] as const).forEach(([name, component]) => {
+            if (name) {
+                this.disposeWithMe(this._componentManager.register(name, component));
+            }
+        });
 
         const popups: IDocPopup[] = [
             {
diff --git a/packages/docs-quick-insert-ui/src/index.ts b/packages/docs-quick-insert-ui/src/index.ts
index 49e0117bf8..fceddd8b01 100644
--- a/packages/docs-quick-insert-ui/src/index.ts
+++ b/packages/docs-quick-insert-ui/src/index.ts
@@ -28,6 +28,8 @@ export type {
 export { DocQuickInsertPopupService } from './services/doc-quick-insert-popup.service';
 export { DocQuickInsertTriggerController } from './controllers/doc-quick-insert-trigger.controller';
 export { DocQuickInsertUIController } from './controllers/doc-quick-insert-ui.controller';
+export { QuickInsertPlaceholderComponentKey } from './views/QuickInsertPlaceholder';
+export { KeywordInputPlaceholderComponentKey } from './views/KeywordInputPlaceholder';
 
 // #region - all commands
 
diff --git a/packages/docs-quick-insert-ui/src/views/KeywordInputPlaceholder.tsx b/packages/docs-quick-insert-ui/src/views/KeywordInputPlaceholder.tsx
index a5896cbad7..4c688ab501 100644
--- a/packages/docs-quick-insert-ui/src/views/KeywordInputPlaceholder.tsx
+++ b/packages/docs-quick-insert-ui/src/views/KeywordInputPlaceholder.tsx
@@ -17,12 +17,12 @@
 import { LocaleService } from '@univerjs/core';
 import { useDependency } from '@univerjs/ui';
 
-const KeywordInputPlaceholder = () => {
+export const KeywordInputPlaceholderComponentKey = 'docs.quick.insert.keyword-input-placeholder';
+
+export const KeywordInputPlaceholder = () => {
     const localeService = useDependency(LocaleService);
     // TODO: 需要根据fontSize来计算高度跟偏移
     return <div className="univer-translate-y-1.5 univer-text-sm univer-text-gray-500">{localeService.t('docQuickInsert.keywordInputPlaceholder')}</div>;
 };
 
-KeywordInputPlaceholder.componentKey = 'KeywordInputPlaceholder';
-
-export { KeywordInputPlaceholder };
+KeywordInputPlaceholder.componentKey = KeywordInputPlaceholderComponentKey;
diff --git a/packages/docs-quick-insert-ui/src/views/QuickInsertPlaceholder.tsx b/packages/docs-quick-insert-ui/src/views/QuickInsertPlaceholder.tsx
index 440e2b8489..c8277f2ab8 100644
--- a/packages/docs-quick-insert-ui/src/views/QuickInsertPlaceholder.tsx
+++ b/packages/docs-quick-insert-ui/src/views/QuickInsertPlaceholder.tsx
@@ -17,6 +17,8 @@
 import { LocaleService } from '@univerjs/core';
 import { useDependency } from '@univerjs/ui';
 
+export const QuickInsertPlaceholderComponentKey = 'docs.quick.insert.placeholder';
+
 export const QuickInsertPlaceholder = () => {
     const localeService = useDependency(LocaleService);
     return (
@@ -30,3 +32,5 @@ export const QuickInsertPlaceholder = () => {
         </div>
     );
 };
+
+QuickInsertPlaceholder.componentKey = QuickInsertPlaceholderComponentKey;
diff --git a/packages/docs-quick-insert-ui/src/views/QuickInsertPopup.tsx b/packages/docs-quick-insert-ui/src/views/QuickInsertPopup.tsx
index 7445022141..c101e7712d 100644
--- a/packages/docs-quick-insert-ui/src/views/QuickInsertPopup.tsx
+++ b/packages/docs-quick-insert-ui/src/views/QuickInsertPopup.tsx
@@ -64,7 +64,7 @@ function translateMenus(menus: DocPopupMenu[], localeService: LocaleService) {
 
 const interceptKeys = [KeyCode.ARROW_UP, KeyCode.ARROW_DOWN, KeyCode.ENTER];
 
-const QuickInsertPopup = () => {
+export const QuickInsertPopup = () => {
     const localeService = useDependency(LocaleService);
     const docQuickInsertPopupService = useDependency(DocQuickInsertPopupService);
     const componentManager = useDependency(ComponentManager);
@@ -252,7 +252,7 @@ const QuickInsertPopup = () => {
 
     const hasMenus = filteredMenus.length > 0;
 
-    const Placeholder = currentPopup?.popup.Placeholder || QuickInsertPlaceholder;
+    const Placeholder = currentPopup?.popup.Placeholder || componentManager.get(QuickInsertPlaceholder.componentKey);
 
     return (
         <div
@@ -269,12 +269,10 @@ const QuickInsertPopup = () => {
                         </Menu>
                     </div>
                 )
-                : <Placeholder />}
+                : Placeholder && <Placeholder />}
         </div>
 
     );
 };
 
-QuickInsertPopup.componentKey = 'doc.quick-insert-popup';
-
-export { QuickInsertPopup };
+QuickInsertPopup.componentKey = 'docs.quick.insert.popup';