diff --git a/src/cloud/components/Blocks/BlockContent.tsx b/src/cloud/components/Blocks/BlockContent.tsx index 33a6f3f3cd..662efd11c1 100644 --- a/src/cloud/components/Blocks/BlockContent.tsx +++ b/src/cloud/components/Blocks/BlockContent.tsx @@ -22,6 +22,7 @@ import { FoldingProps } from '../../../design/components/atoms/FoldingWrapper' import { blockEventEmitter } from '../../lib/utils/events' import { sleep } from '../../../lib/sleep' import cc from 'classcat' +import { useRouter } from '../../lib/router' export interface Canvas extends SerializedDocWithBookmark { rootBlock: ContainerBlock @@ -130,6 +131,47 @@ const BlockContent = ({ doc }: BlockContentProps) => { ) }, [getFoldEvents, state, sideBarOpenedBlocksIdsSet]) + const { state: routerState } = useRouter() + const docIsNew = !!routerState?.new + const previousDocRef = useRef<{ + blockType: 'container' | 'markdown' | 'embed' | 'table' | 'github.issue' + blockId: string + }>() + useEffect(() => { + if (state.type === 'loading') { + return + } + + if (docIsNew && previousDocRef.current?.blockId !== state.block.id) { + previousDocRef.current = { + blockType: state.block.type, + blockId: state.block.id, + } + if ( + state.block.children != null && + state.block.children.length > 0 && + state.block.children[0] != null + ) { + async function focusBlock({ + type, + id, + }: { + type: 'container' | 'markdown' | 'embed' | 'table' | 'github.issue' + id: string + }) { + await sleep(300).finally(() => { + blockEventEmitter.dispatch({ + event: 'creation', + blockType: type, + blockId: id, + }) + }) + } + focusBlock(state.block.children[0]) + } + } + }, [state, docIsNew]) + if (state.type === 'loading') { return
loading
} @@ -151,19 +193,15 @@ const BlockContent = ({ doc }: BlockContentProps) => { sendingMap={sendingMap} /> ))} + -
- <> - - -
{ const { openContextModal } = useModal() const { currentUserIsCoreMember, permissions = [] } = usePage() + return ( img { width: 100%; height: 100%; diff --git a/src/cloud/components/Blocks/props/DataTypeMenu.tsx b/src/cloud/components/Blocks/props/DataTypeMenu.tsx index 922dda8520..6022f27ec4 100644 --- a/src/cloud/components/Blocks/props/DataTypeMenu.tsx +++ b/src/cloud/components/Blocks/props/DataTypeMenu.tsx @@ -3,6 +3,7 @@ import { mdiCalendarOutline, mdiCheckboxMarkedOutline, mdiLink, + mdiNumeric, mdiText, } from '@mdi/js' import React from 'react' @@ -34,7 +35,7 @@ const DataTypeMenu = ({ onSelect }: DataTypeMenuProps) => { id: 'add-data-number', label: 'Number', onClick: () => onSelect('number'), - iconPath: mdiText, + iconPath: mdiNumeric, }, }} /> @@ -91,7 +92,7 @@ export default DataTypeMenu export function getBlockPropertyIconByType(type: string) { switch (type) { case 'number': - return mdiText + return mdiNumeric case 'date': return mdiCalendarOutline case 'user': diff --git a/src/cloud/lib/blocks/table.ts b/src/cloud/lib/blocks/table.ts index 06ec2abf20..c6404a0f08 100644 --- a/src/cloud/lib/blocks/table.ts +++ b/src/cloud/lib/blocks/table.ts @@ -6,6 +6,7 @@ import { mdiCheckboxMarkedOutline, mdiGithub, mdiLink, + mdiNumeric, mdiText, } from '@mdi/js' import { v4 as uuid } from 'uuid' @@ -252,8 +253,9 @@ export function getDataColumnIcon(col: Column) { return mdiLink case 'checkbox': return mdiCheckboxMarkedOutline - case 'text': case 'number': + return mdiNumeric + case 'text': default: return mdiText } diff --git a/src/cloud/lib/utils/blocks.ts b/src/cloud/lib/utils/blocks.ts index 15caec8d05..0c4164d421 100644 --- a/src/cloud/lib/utils/blocks.ts +++ b/src/cloud/lib/utils/blocks.ts @@ -20,9 +20,10 @@ export function blockTitle(block: Block) { switch (block.type) { case 'github.issue': return block.data?.title || 'Github Issue' + case 'container': + return block.name.trim() === '' ? 'Page' : block.name case 'embed': case 'table': - case 'container': return block.name.trim() === '' ? capitalize(block.type) : block.name default: return capitalize(block.type)