@sparwelt/minimalistic-prismic-dom-parser

    0.1.1 • Public • Published

    Build Status

    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

    Keywords

    Install

    npm i @sparwelt/minimalistic-prismic-dom-parser

    DownloadsWeekly Downloads

    9

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    25.9 kB

    Total Files

    14

    Last publish

    Collaborators

    • sparwelt-gmbh