Created
January 13, 2022 18:27
-
-
Save good-idea/415bad6e6bfd5df0d9a8867fc4abe292 to your computer and use it in GitHub Desktop.
WIP sanity block content typings
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // copied & modified from: | |
| // https://github.com/nhi/sanity-block-content-to-react-types | |
| declare module '@sanity/block-content-to-react' { | |
| import * as React from 'react'; | |
| export interface Serializers { | |
| /** | |
| * Serializers for block types | |
| * @example | |
| * ```jsx | |
| * const input = [{ | |
| * _type: 'block', | |
| * children: [{ | |
| * _key: 'a1ph4', | |
| * _type: 'span', | |
| * marks: ['s0m3k3y'], | |
| * text: 'Sanity' | |
| * }], | |
| * markDefs: [{ | |
| * _key: 's0m3k3y', | |
| * _type: 'highlight', | |
| * color: '#E4FC5B' | |
| * }] | |
| * }] | |
| * | |
| * const highlight = props => { | |
| * return ( | |
| * <span style={{backgroundColor: props.mark.color}}> | |
| * {props.children} | |
| * </span> | |
| * ) | |
| * } | |
| * | |
| * <BlockContent | |
| * blocks={input} | |
| * serializers={{marks: {highlight}}} | |
| * /> | |
| * ``` | |
| */ | |
| types: Record<string, (props: any) => JSX.Element | null>; | |
| /** | |
| * Serializers for marks - data that annotates a text child of a block. | |
| * @example | |
| * ```jsx | |
| * const input = [{ | |
| * _type: 'block', | |
| * children: [{ | |
| * _key: 'a1ph4', | |
| * _type: 'span', | |
| * marks: ['s0m3k3y'], | |
| * text: 'Sanity' | |
| * }], | |
| * markDefs: [{ | |
| * _key: 's0m3k3y', | |
| * _type: 'highlight', | |
| * color: '#E4FC5B' | |
| * }] | |
| * }] | |
| * | |
| * const highlight = props => { | |
| * return ( | |
| * <span style={{backgroundColor: props.mark.color}}> | |
| * {props.children} | |
| * </span> | |
| * ) | |
| * } | |
| * | |
| * <BlockContent | |
| * blocks={input} | |
| * serializers={{marks: {highlight}}} | |
| * /> | |
| * ``` | |
| */ | |
| marks: Record<string, (props: any) => JSX.Element | null>; | |
| /** React component to use when rendering a list node */ | |
| list: React.Component; | |
| /** React component to use when rendering a list item node */ | |
| listItem: React.Component; | |
| /** | |
| * React component to use when transforming newline characters | |
| * to a hard break (<br/> by default, pass false to render newline character) | |
| */ | |
| hardBreak: React.Component; | |
| /** Serializer for the container wrapping the blocks */ | |
| container: React.Component; | |
| } | |
| export interface BlockContentProps { | |
| /** | |
| * Pass in either an array or a single object of [Portable Text](https://github.com/portabletext/portabletext) | |
| * | |
| * *This is the only required prop* | |
| */ | |
| blocks: any[] | any; | |
| /** | |
| * When more than one block is given, a container node has to be created. Passing a className will pass it on to the container. | |
| * @note see `renderContainerOnSingleChild` | |
| */ | |
| className?: string; | |
| /** | |
| * When a single block is given as input, the default behavior is to not render any container. | |
| * If you always want to render the container, pass `true`. | |
| */ | |
| renderContainerOnSingleChild?: boolean; | |
| /** | |
| * Define custom serializers | |
| * | |
| */ | |
| serializers?: Partial<Serializers>; | |
| /** | |
| * When encountering image blocks, | |
| * this defines which query parameters to apply in order to control size/crop mode etc. | |
| */ | |
| imageOptions?: any; | |
| /** The ID of your Sanity project. */ | |
| projectId?: string; | |
| /** Name of the Sanity dataset containing the document that is being rendered. */ | |
| dataset?: string; | |
| } | |
| export const defaultSerializers: Serializers; | |
| declare function BlockContent(props: BlockContentProps): JSX.Element; | |
| /** React component for transforming Sanity block content to React components */ | |
| export default BlockContent; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment