diff --git a/package.json b/package.json index 0fc96a3b..3e88fe55 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "db-seed": "prisma db seed", "build-seed": "tsc -p tsconfig.seed.json", "db-reset": "prisma migrate dev reset", - "dev": "next dev -p 1112", + "dev": "next dev -p 1111", "dev:https": "ngrok http 1111", "build": "set NODE_ENV=production & next build", "vercel-build": "prisma generate && prisma migrate deploy && prisma db seed && next build", diff --git a/src/components/BlinkoEditor/index.tsx b/src/components/BlinkoEditor/index.tsx index 5cc3e702..71dc1846 100644 --- a/src/components/BlinkoEditor/index.tsx +++ b/src/components/BlinkoEditor/index.tsx @@ -28,13 +28,12 @@ export const BlinkoEditor = observer(({ mode, onSended, onHeightChange }: IProps originFiles={!isCreateMode ? blinko.curSelectedNote?.attachments : []} content={isCreateMode ? blinko.noteContent! : blinko.curSelectedNote?.content!} onChange={v => { - if (v == '') { - onHeightChange?.(editorRef.current?.clientHeight < 90 ? editorRef.current?.clientHeight : 90) - } else { - onHeightChange?.(editorRef.current?.clientHeight ?? 90) - } + onHeightChange?.(editorRef.current?.clientHeight ?? 75) isCreateMode ? (blinko.noteContent = v) : (blinko.curSelectedNote!.content = v) }} + onHeightChange={() => { + onHeightChange?.(editorRef.current?.clientHeight ?? 75) + }} isSendLoading={blinko.upsertNote.loading.value} bottomSlot={ isCreateMode ?
Drop to upload files
: diff --git a/src/components/Common/Editor/index.tsx b/src/components/Common/Editor/index.tsx index 4916214b..8d172710 100644 --- a/src/components/Common/Editor/index.tsx +++ b/src/components/Common/Editor/index.tsx @@ -39,6 +39,7 @@ type IProps = { mode: 'create' | 'edit', content: string, onChange?: (content: string) => void, + onHeightChange?: () => void, onSend?: (args: OnSendContentType) => Promise, isSendLoading?: boolean, bottomSlot?: ReactElement, @@ -84,7 +85,7 @@ export const handleEditorKeyEvents = () => { }) } -const Editor = observer(({ content, onChange, onSend, isSendLoading, bottomSlot, originFiles, mode }: IProps) => { +const Editor = observer(({ content, onChange, onSend, isSendLoading, bottomSlot, originFiles, mode, onHeightChange }: IProps) => { content = ProcessCodeBlocks(content) const [canSend, setCanSend] = useState(false) const [isWriting, setIsWriting] = useState(false) @@ -375,6 +376,9 @@ const Editor = observer(({ content, onChange, onSend, isSendLoading, bottomSlot, onChange?.('') store.files = [] } + }} + onKeyDown={e => { + onHeightChange?.() }}> { diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index f445e2b8..4949a15f 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -209,8 +209,8 @@ export const CommonLayout = observer(({ {/* backdrop */} - { }} className="flex h-[calc(100%_-_70px)] overflow-y-scroll scroll-container"> -
+ {}} className="flex h-[calc(100%_-_70px)] overflow-y-scroll scroll-container"> +
{children}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 6a1fe966..08902c81 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -12,14 +12,15 @@ import { ScrollArea } from '@/components/Common/ScrollArea'; import { BlinkoCard } from '@/components/BlinkoCard'; import { BaseStore } from '@/store/baseStore'; import Webcam from "react-webcam"; +import { useMediaQuery } from 'usehooks-ts'; const Home = observer(() => { const { t } = useTranslation(); + const isPc = useMediaQuery('(min-width: 768px)') const blinko = RootStore.Get(BlinkoStore) blinko.useQuery(useRouter()) - const store = RootStore.Local(() => ({ - editorHeight: 75, + editorHeight: 65, get showEditor() { return !blinko.noteListFilterConfig.isArchived }, @@ -30,9 +31,10 @@ const Home = observer(() => { return (
- {store.showEditor &&
- store.editorHeight = height} /> + { + store.editorHeight = height + }} />
}
@@ -47,7 +49,7 @@ const Home = observer(() => { { !blinko.noteList.isEmpty && blinko.onBottom()} - style={{ height: store.showEditor ? `calc(100vh - ${100 + store.editorHeight}px)` : '100vh' }} + style={{ height: store.showEditor ? `calc(100% - ${(isPc ? 60 : 0) + store.editorHeight}px)` : '100%' }} className={`px-2 mt-0 md:mt-6 md:px-6 w-full h-full transition-all scroll-area`}>