\n ))}\n

\n );\n continue;\n }\n \n // Handle numbered list grouping\n if (block.type === 'numbered_list_item') {\n const listItems: any[] = [];\n \n // Collect consecutive numbered list items\n while (i < blocks.length && blocks[i].type === 'numbered_list_item') {\n listItems.push(blocks[i]);\n i++;\n }\n \n groupedBlocks.push(\n

\n ))}\n

\n );\n continue;\n }\n \n // Handle regular blocks\n groupedBlocks.push(\n \n );\n i++;\n }\n\n return <>{groupedBlocks};\n}\n\nexport function NotionBlock({ block, level = 0 }: NotionBlockProps) {\n if (!block || !block.type) {\n return null;\n }\n\n const renderRichText = (richText: any[]) => {\n if (!richText || !Array.isArray(richText)) {\n return '';\n }\n\n return richText.map((text, index) => {\n let content = text.plain_text || '';\n \n // Apply text formatting\n if (text.annotations?.bold) {\n content = {content};\n }\n if (text.annotations?.italic) {\n content = {content};\n }\n if (text.annotations?.strikethrough) {\n content = ~~{content}~~;\n }\n if (text.annotations?.underline) {\n content = {content};\n }\n if (text.annotations?.code) {\n content = {content};\n }\n \n // Handle links\n if (text.href) {\n content = (\n \n {content}\n \n );\n }\n \n return content;\n });\n };\n\n const renderChildren = () => {\n if (!block.children || block.children.length === 0) {\n return null;\n }\n\n // Check if current block is a list item\n const isListItem = block.type === 'bulleted_list_item' || block.type === 'numbered_list_item';\n \n if (isListItem) {\n // For list items, separate list children from non-list children\n const listChildren: any[] = [];\n const nonListChildren: any[] = [];\n \n block.children.forEach((child: any) => {\n if (child.type === 'bulleted_list_item' || child.type === 'numbered_list_item') {\n listChildren.push(child);\n } else {\n nonListChildren.push(child);\n }\n });\n \n return (\n <>\n {/* Render nested lists directly (no wrapper div) */}\n {listChildren.length > 0 && (\n \n )}\n \n {/* Render non-list content with wrapper for indentation */}\n {nonListChildren.length > 0 && (\n

\n \n

\n )}\n \n );\n }\n \n // For non-list items, use normal wrapper with indentation\n return (\n

0 ? \"ml-6\" : \"\"}>\n \n

\n );\n };\n\n const blockContent = block[block.type];\n\n switch (block.type) {\n // Simple blocks - no wrapper needed\n case 'paragraph':\n const hasChildren = block.children && block.children.length > 0;\n if (hasChildren) {\n // If paragraph has children, we need a wrapper\n return (\n <>\n

{renderRichText(blockContent?.rich_text)}

\n {renderChildren()}\n \n );\n }\n return (\n

{renderRichText(blockContent?.rich_text)}

\n );\n\n case 'heading_1':\n return (\n <>\n

{renderRichText(blockContent?.rich_text)}

\n {renderChildren()}\n \n );\n\n case 'heading_2':\n return (\n <>\n

{renderRichText(blockContent?.rich_text)}

\n {renderChildren()}\n \n );\n\n case 'heading_3':\n return (\n <>\n

{renderRichText(blockContent?.rich_text)}

\n {renderChildren()}\n \n );\n\n // List items - no wrapper, will be wrapped by ul/ol in NotionBlocks\n case 'bulleted_list_item':\n case 'numbered_list_item':\n return (\n

\n {renderRichText(blockContent?.rich_text)}\n {renderChildren()}\n

\n );\n\n case 'quote':\n return (\n <>\n

\n {renderRichText(blockContent?.rich_text)}\n

\n {renderChildren()}\n \n );\n\n case 'divider':\n return

;\n\n case 'code':\n const codeContent = blockContent?.rich_text?.map((t: any) => t.plain_text).join('') || '';\n const language = blockContent?.language || 'text';\n const prismLanguage = mapNotionLanguageToPrism(language);\n \n return (\n <>\n

\n              \n                {codeContent}\n              \n

\n {language && language !== 'plain text' && (\n

\n {language}\n

\n )}\n

\n {renderChildren()}\n \n );\n\n // Complex blocks - wrapper needed\n case 'to_do':\n return (\n

\n \n

\n \n {renderRichText(blockContent?.rich_text)}\n \n {renderChildren()}\n

\n );\n\n case 'toggle':\n return (\n

\n \n ▶\n \n {renderRichText(blockContent?.rich_text)}\n

\n {renderChildren()}\n

\n );\n\n case 'callout':\n return (\n

\n {blockContent?.icon && (\n

\n {blockContent.icon.emoji || blockContent.icon.external?.url || '💡'}\n

\n )}\n

\n {renderRichText(blockContent?.rich_text)}\n {renderChildren()}\n

\n );\n\n // Media blocks - conditional wrapper based on caption\n case 'image':\n const imageUrl = blockContent?.external?.url || blockContent?.file?.url;\n const imageCaption = blockContent?.caption ? renderRichText(blockContent.caption) : '';\n \n if (!imageUrl) return null;\n \n if (imageCaption) {\n return (\n

\n );\n }\n \n return (\n <>\n $\"Image\"\n$ \n {renderChildren()}\n \n );\n\n case 'video':\n const videoUrl = blockContent?.external?.url || blockContent?.file?.url;\n const videoCaption = blockContent?.caption ? renderRichText(blockContent.caption) : '';\n \n if (!videoUrl) return null;\n \n if (videoCaption) {\n return (\n

\n {videoCaption}\n

\n {renderChildren()}\n \n );\n }\n \n return (\n <>\n

\n {renderChildren()}\n \n );\n\n case 'file':\n const fileUrl = blockContent?.external?.url || blockContent?.file?.url;\n const fileName = blockContent?.name || 'Download file';\n \n return (\n

\n {fileUrl && (\n \n 📎\n {fileName}\n \n )}\n {renderChildren()}\n

\n );\n\n case 'bookmark':\n const bookmarkUrl = blockContent?.url;\n \n return (\n

\n {bookmarkUrl && (\n \n 🔖\n {bookmarkUrl}\n \n )}\n {renderChildren()}\n

\n );\n\n case 'embed':\n const embedUrl = blockContent?.url;\n \n return (\n

\n {embedUrl && (\n \n 🔗\n {embedUrl}\n \n )}\n {renderChildren()}\n

\n );\n\n // Table blocks - semantic structure\n case 'table':\n return (\n \n \n \n \n

\n );\n\n case 'table_row':\n return (\n \n {blockContent?.cells?.map((cell: any[], index: number) => (\n \n {renderRichText(cell)}\n \n ))}\n \n );\n\n case 'column_list':\n return (\n

\n \n

\n );\n\n case 'column':\n return (\n

\n \n

\n );\n\n default:\n // For unsupported block types, show a placeholder\n return (\n

\n Unsupported block type: {block.type}\n

\n {blockContent?.rich_text && (\n

\n {renderRichText(blockContent.rich_text)}\n

\n )}\n {renderChildren()}\n

\n );\n }\n}","deleted","label",[171,172,152],"frontend","components","permalink","https://www.val.town/x/lightweight/glimpse2-runbook-view-glimpse-save-login-react/code/frontend/components/NotionBlock.tsx","extension","actionData","errors"]