fix: cleanup usePromptModal (#7157)

packages/frontend/component/src/ui/modal/confirm-modal.stories.tsx

@@ -5,7 +5,6 @@ import {
   ConfirmModal,
   type ConfirmModalProps,
   useConfirmModal,
-  usePromptModal,
 } from './confirm-modal';
 
 export default {
@@ -58,20 +57,3 @@ export const AutoClose = () => {
 
   return <Button onClick={onConfirm}>Show confirm</Button>;
 };
-
-export const Prompt = () => {
-  const openPrompt = usePromptModal();
-
-  const showPrompt = async () => {
-    const value = await openPrompt({
-      placeholder: 'Enter your name',
-      title: 'Give me a string',
-      message: 'What is your name?',
-    });
-    if (value) {
-      alert('your name is ' + value);
-    }
-  };
-
-  return <Button onClick={showPrompt}>Show prompt</Button>;
-};

packages/frontend/component/src/ui/modal/confirm-modal.tsx

@@ -1,12 +1,10 @@
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { DialogTrigger } from '@radix-ui/react-dialog';
 import clsx from 'clsx';
-import type { PropsWithChildren, ReactNode } from 'react';
+import type { PropsWithChildren } from 'react';
 import { createContext, useCallback, useContext, useState } from 'react';
 
 import type { ButtonProps } from '../button';
 import { Button } from '../button';
-import Input from '../input';
 import type { ModalProps } from './modal';
 import { Modal } from './modal';
 import * as styles from './styles.css';
@@ -162,53 +160,3 @@ export const useConfirmModal = () => {
     closeConfirmModal: context.closeConfirmModal,
   };
 };
-
-export const usePromptModal = () => {
-  const { closeConfirmModal, openConfirmModal } = useConfirmModal();
-  const t = useAFFiNEI18N();
-  return useCallback(
-    (props: {
-      confirmText?: string;
-      cancelText?: string;
-      placeholder?: string;
-      message: ReactNode;
-      title: ReactNode;
-      abort?: AbortSignal;
-    }) => {
-      return new Promise<string | null>(resolve => {
-        let value = '';
-        const message = (
-          <div className={styles.promptModalContent}>
-            {props.message}
-            <Input
-              placeholder={props.placeholder}
-              onChange={e => (value = e)}
-            />
-          </div>
-        );
-        openConfirmModal({
-          ...props,
-          confirmButtonOptions: {
-            children: props.confirmText ?? t['Confirm'](),
-            type: 'primary',
-          },
-          cancelButtonOptions: {
-            children: props.cancelText ?? t['Cancel'](),
-          },
-          description: message,
-          onConfirm: () => {
-            resolve(value);
-          },
-          onCancel: () => {
-            resolve(null);
-          },
-        });
-        props.abort?.addEventListener('abort', () => {
-          resolve(null);
-          closeConfirmModal();
-        });
-      });
-    },
-    [closeConfirmModal, openConfirmModal, t]
-  );
-};

packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx

@@ -2,7 +2,6 @@ import {
   createReactComponentFromLit,
   useConfirmModal,
   useLitPortalFactory,
-  usePromptModal,
 } from '@affine/component';
 import { useJournalInfoHelper } from '@affine/core/hooks/use-journal';
 import { QuickSearchService } from '@affine/core/modules/cmdk';
@@ -84,12 +83,11 @@ const usePatchSpecs = (page: Doc, specs: BlockSpec[]) => {
   }, [page.collection]);
 
   const confirmModal = useConfirmModal();
-  const openPromptModal = usePromptModal();
   const patchedSpecs = useMemo(() => {
     let patched = patchReferenceRenderer(specs, reactToLit, referenceRenderer);
     patched = patchNotificationService(
       patchReferenceRenderer(patched, reactToLit, referenceRenderer),
-      { ...confirmModal, prompt: openPromptModal }
+      confirmModal
     );
     if (!page.readonly && runtimeConfig.enablePeekView) {
       patched = patchPeekViewService(patched, peekViewService);
@@ -100,7 +98,6 @@ const usePatchSpecs = (page: Doc, specs: BlockSpec[]) => {
     return patched;
   }, [
     confirmModal,
-    openPromptModal,
     page.readonly,
     peekViewService,
     quickSearchService,

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/spec-patchers.tsx

@@ -1,11 +1,11 @@
 import {
   createReactComponentFromLit,
   type ElementOrFactory,
+  Input,
   notify,
   toast,
   type ToastOptions,
   type useConfirmModal,
-  type usePromptModal,
 } from '@affine/component';
 import type {
   QuickSearchService,
@@ -119,13 +119,7 @@ export function patchReferenceRenderer(
 
 export function patchNotificationService(
   specs: BlockSpec[],
-  {
+  { closeConfirmModal, openConfirmModal }: ReturnType<typeof useConfirmModal>
-    closeConfirmModal,
-    openConfirmModal,
-    prompt,
-  }: ReturnType<typeof useConfirmModal> & {
-    prompt: ReturnType<typeof usePromptModal>;
-  }
 ) {
   const rootSpec = specs.find(
     spec => spec.schema.model.flavour === 'affine:page'
@@ -168,13 +162,36 @@ export function patchNotificationService(
         cancelText,
         abort,
       }) => {
-        return prompt({
+        return new Promise<string | null>(resolve => {
-          message: toReactNode(message),
+          let value = '';
-          title: toReactNode(title),
+          const description = (
-          confirmText,
+            <div>
-          cancelText,
+              <span style={{ marginBottom: 12 }}>{toReactNode(message)}</span>
-          placeholder,
+              <Input placeholder={placeholder} onChange={e => (value = e)} />
-          abort,
+            </div>
+          );
+          openConfirmModal({
+            title: toReactNode(title),
+            description: description,
+            confirmButtonOptions: {
+              children: confirmText ?? 'Confirm',
+              type: 'primary',
+            },
+            cancelButtonOptions: {
+              children: cancelText ?? 'Cancel',
+            },
+
+            onConfirm: () => {
+              resolve(value);
+            },
+            onCancel: () => {
+              resolve(null);
+            },
+          });
+          abort?.addEventListener('abort', () => {
+            resolve(null);
+            closeConfirmModal();
+          });
         });
       },
       toast: (message: string, options: ToastOptions) => {