diff --git a/src/block.tsx b/src/block.tsx index 919ddf4..04f92d5 100644 --- a/src/block.tsx +++ b/src/block.tsx @@ -17,6 +17,22 @@ import PageIcon from "./components/page-icon"; import PageHeader from "./components/page-header"; import { classNames, getTextContent, getListNumber } from "./utils"; +const unsupportedBlockTypeMessages: Record = { + checkbox: + "This Notion document includes a Checkbox property, which react-notion cannot import. Please remove the Checkbox to render this page.", + collection_view: + "This Notion document includes a Database, which react-notion cannot import. Please remove the Database to render this page." +}; + +const UnsupportedBlock: React.FC<{ type?: string }> = ({ type }) => { + const message = type + ? unsupportedBlockTypeMessages[type] || + `This Notion document includes an unsupported ${type} block, which react-notion cannot import. Please remove it to render this page.` + : "This Notion document includes unsupported content, which react-notion cannot import."; + + return
{message}
; +}; + export const createRenderChildText = ( customDecoratorComponents?: CustomDecoratorComponents ) => (properties: DecorationType[]) => { @@ -360,7 +376,9 @@ export const Block: React.FC = props => { ); case "collection_view": - if (!block) return null; + if (!block?.collection) { + return ; + } const collectionView = block?.collection?.types[0]; @@ -519,7 +537,7 @@ export const Block: React.FC = props => { if (process.env.NODE_ENV !== "production") { console.log("Unsupported type " + block?.value?.type); } - return
; + return ; } return null; }; diff --git a/src/styles.css b/src/styles.css index da0e210..b656ede 100644 --- a/src/styles.css +++ b/src/styles.css @@ -339,6 +339,15 @@ img.notion-page-icon { padding: 3px 2px; } +.notion-error { + background: rgba(235, 87, 87, 0.08); + border: 1px solid rgba(235, 87, 87, 0.35); + border-radius: 3px; + color: #a61b1b; + margin: 4px 0; + padding: 8px 10px; +} + .notion .notion-code { font-size: 85%; }