Espen Hovlandsdal
Open-sourceror @ Sanity.io
Espen is located at San Francisco, CA
Render an array of block text from Sanity to HTML.
Render an array of block text from Sanity to HTML.
npm install --save @sanity/block-content-to-html
const blocksToHtml = require('@sanity/block-content-to-html')
const client = require('@sanity/client')({
projectId: '<your project id>',
dataset: '<some dataset>',
useCdn: true
})
// `h` is a way to build HTML known as hyperscript
// See https://github.com/hyperhype/hyperscript for more info
const h = blocksToHtml.h
const serializers = {
types: {
code: props => (
h('pre', {className: props.node.language},
h('code', props.node.code)
)
)
}
}
client.fetch('*[_type == "article"][0]').then(article => {
const el = blocksToHtml({
blocks: article.body,
serializers: serializers
})
document.getElementById('root').appendChild(el)
})
className
- 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 that if only a single block is given as input, the container node will be skipped.serializers
- Specifies the functions to use for rendering content. Merged with default serializers.serializers.types
- Serializers for block types, see example aboveserializers.marks
- Serializers for marks - data that annotates a text child of a block. See example usage below.serializers.list
- Function to use when rendering a list nodeserializers.listItem
- Function to use when rendering a list item nodeserializers.hardBreak
- Function to use when transforming newline characters to a hard break (<br/>
by default, pass false
to render newline character)imageOptions
- When encountering image blocks, this defines which query parameters to apply in order to control size/crop mode etc.In addition, in order to render images without materializing the asset documents, you should also specify:
projectId
- The ID of your Sanity project.dataset
- Name of the Sanity dataset containing the document that is being rendered.const input = [{
_type: 'block',
children: [{
_key: 'a1ph4',
_type: 'span',
marks: ['s0m3k3y'],
text: 'Sanity'
}],
markDefs: [{
_key: 's0m3k3y',
_type: 'highlight',
color: '#E4FC5B'
}]
}]
const highlight = props => (
h('span', {style: {backgroundColor: props.mark.color}}, props.children)
)
const content = blocksToHtml({
blocks: input,
serializers: {marks: {highlight}}
})
blocksToHtml({
blocks: input,
imageOptions: {w: 320, h: 240, fit: 'max'},
projectId: 'myprojectid',
dataset: 'mydataset',
})
block
-typeconst BlockRenderer = props => {
const style = props.node.style || 'normal'
if (/^h\d/.test(style)) {
const level = style.replace(/[^\d]/g, '')
return h('h2', {className: `my-heading level-${level}`}, props.children)
}
return style === 'blockquote'
? h('blockquote', {className: 'my-block-quote'}, props.children)
: h('p', {className: 'my-paragraph'}, props.children)
}
blocksToHtml({
blocks: input,
serializers: {types: {block: BlockRenderer}}
})
MIT-licensed. See LICENSE.
Open-sourceror @ Sanity.io
Fullstack developer at Sanity.io
Browse and import images from your Cloudinary account to your Sanity Studio
Go to Asset source for CloudinarySearch photos on Unsplash and insert them directly inside of your Sanity Studio.
Go to Asset source for UnsplashUpload videos to Mux directly from the studio.
Go to Mux inputUse geo-related input types using Google Maps.
Go to Google Maps input