JClackett
commented
3 years ago Also, I used to have a React component that could render out the RichTextBlock like below:
import * as React from "react"
import { Text, Link, StyleProps } from "@chakra-ui/react"
import type { Annotations, RichText } from "@notionhq/client/build/src/api-types"
interface RichTextBlockProps {
text: RichText[]
}
export function RichTextBlock(props: RichTextBlockProps) {
const textDecorationAttr = React.useCallback((annotations: Annotations): Omit<StyleProps, "apply"> => {
return {
fontWeight: annotations.bold ? 600 : undefined,
textDecor: `${annotations.underline ? "underline " : ""}${
annotations.strikethrough ? "line-through" : ""
}`,
fontStyle: annotations.italic ? "italic" : undefined,
}
}, [])
if (props.text.length === 0) return <br />
return (
<>
{props.text.map((text, i) => {
if (text.href) {
return (
<Link
key={i}
href={text.href}
isExternal
color="gray.600"
_hover={{ color: "gray.900" }}
{...textDecorationAttr(text.annotations)}
textDecor="underline"
>
{text.plain_text}
</Link>
)
} else {
return (
<Text as="span" key={i} {...textDecorationAttr(text.annotations)}>
{text.plain_text}
</Text>
)
}
})}
</>
)
}
Which was super nice as I could just import the "RichText" type, now it seems I have to manually copy it from your types file:
type RichText = {
type: "text"
text: {
content: string
link: {
url: string
} | null
}
annotations: {
bold: boolean
italic: boolean
strikethrough: boolean
underline: boolean
code: boolean
color:
| "default"
| "gray"
| "brown"
| "orange"
| "yellow"
| "green"
| "blue"
| "purple"
| "pink"
| "red"
| "gray_background"
| "brown_background"
| "orange_background"
| "yellow_background"
| "green_background"
| "blue_background"
| "purple_background"
| "pink_background"
| "red_background"
}
plain_text: string
href: string | null
}
nartc
peetjvv
ghost
alfdahlman
bitabs
rhart92
toolness
loicortola
Niceplace
danopia
justjake
jonrimmer
sebastiankade
wcauchois
I see that the individual block types have been removed and replaced with a large generic union on the responses of some queries.
for example (have removed some properties for clarity):
So a Block I guess can now be represented by:
The same goes for the Database type
But when I have a database that has properties on it like "Name" or "Slug", how do I correctly extend the properties type so that its possible to access it without TS complaining, before I could do something like:
But now that the TitlePropertyValue type doesn't exist, not really sure to handle the custom properties?
Any ideas?
Thanks