chore: rename quick insert component key (#4847)

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[] = [
             {

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
 

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;

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;

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';