diff --git a/packages/frontend/component/src/ui/modal/confirm-modal.stories.tsx b/packages/frontend/component/src/ui/modal/confirm-modal.stories.tsx index f7411e94bc..80ce8b2333 100644 --- a/packages/frontend/component/src/ui/modal/confirm-modal.stories.tsx +++ b/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 ; }; - -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 ; -}; diff --git a/packages/frontend/component/src/ui/modal/confirm-modal.tsx b/packages/frontend/component/src/ui/modal/confirm-modal.tsx index c88ed86c6e..f6ae5ae873 100644 --- a/packages/frontend/component/src/ui/modal/confirm-modal.tsx +++ b/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(resolve => { - let value = ''; - const message = ( -
- {props.message} - (value = e)} - /> -
- ); - 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] - ); -}; diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx index 1eba5a13ed..78ae120430 100644 --- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx +++ b/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, diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/spec-patchers.ts b/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/spec-patchers.tsx similarity index 87% rename from packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/spec-patchers.ts rename to packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/spec-patchers.tsx index 3be4804ea6..d13dd97899 100644 --- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/spec-patchers.ts +++ b/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, - prompt, - }: ReturnType & { - prompt: ReturnType; - } + { closeConfirmModal, openConfirmModal }: ReturnType ) { const rootSpec = specs.find( spec => spec.schema.model.flavour === 'affine:page' @@ -168,13 +162,36 @@ export function patchNotificationService( cancelText, abort, }) => { - return prompt({ - message: toReactNode(message), - title: toReactNode(title), - confirmText, - cancelText, - placeholder, - abort, + return new Promise(resolve => { + let value = ''; + const description = ( +
+ {toReactNode(message)} + (value = e)} /> +
+ ); + 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) => {