minimalistic-prismic-dom-parser
Minimalistic prismic dom parser as alternative to prismic-dom with zero dependencies.
Prerequisites
Make sure that you use Prismic API v2, otherwise this library will not work for you. Your API endpoint should look like your-repo-name.prismic.io/api/v2
.
Installation
# Using yarn
$ yarn add --dev @sparwelt/minimalistic-prismic-dom-parser
# Using npm
$ npm i -D @sparwelt/minimalistic-prismic-dom-parser
Usage
Parse as HTML
import { Prismic } from 'prismic-javascript'
import {
HtmlSerializer,
RichTextParser
} from '@sparwelt/minimalistic-prismic-dom-parser'
const getHtml = async () => {
try {
const documents = await Prismic.api(
'https://your-repository-name.prismic.io/api'
)
.then(api => api.query(''))
.then(response => response.results)
return RichTextParser.parseAsHtml(
documents[0].data.someRichTextElement,
new HtmlSerializer()
)
} catch (err) {
return `Something went wrong: ${JSON.stringify(err)}`
}
}
const element = document.createElement('div')
element.innerHTML = getHtml()
Parse as Text
import { Prismic } from 'prismic-javascript'
import { RichTextParser } from '@sparwelt/minimalistic-prismic-dom-parser'
const getText = async () => {
try {
const documents = await Prismic.api(
'https://your-repository-name.prismic.io/api'
)
.then(api => api.query(''))
.then(response => response.results)
return RichTextParser.parseAsText(documents[0].data.someRichTextElement)
} catch (err) {
return `Something went wrong: ${JSON.stringify(err)}`
}
}
const element = document.createElement('div')
element.innerText = getText()
Customisation
HtmlSerializer
Sometimes you might want to customise the HTML output of the rich text parser. This can be done by passing an options object to the htmlSerializer or providing a custom one.
We recommend to use the HtmlSerializer from this package and pass it the options that suit your needs. You can find a list of all options below.
import { HtmlSerializer } from '@sparwelt/minimalistic-prismic-dom-parser/src/html-serializer'
const htmlSerializer = new HtmlSerializer({
imageCopyrightAttribute: 'title'
})
const html = RichTextParser.parseAsHtml(someRichText, htmlSerializer)
Alternatively, when providing your own serializer to the parser, it must at least have a function serializeNodeTree
that returns an array of strings. It receives the parsed node tree as first parameter.
The array of strings returned by serializeNodeTree
will be concatenated by the parser and returned as string.
class CustomHtmlSerializer {
serializeNodeTree(nodeTree) {
const step = node => {
const serializedChildren = node.children.reduce(
(result, node) => result.concat([step(node)]),
[]
)
return `<p>${node.type}${serializedChildren.join('')}</p>`
}
return nodeTree.children.map(parentNode => {
return step(parentNode)
})
}
}
const html = RichTextParser.parseAsHtml(
someRichText,
new CustomHtmlSerializer()
)
HtmlSerializer Options
Option | Default | Description |
---|---|---|
defaultHyperlinkTarget | _self | Value for hyperlink target attribute used as fallback if no link.target is provided by Prismic |
imageCopyrightAttribute | data-copyright | Attribute to assign the imageElement.copyright to |