How to use prismic-dom - 10 common examples

// @flow
import PrismicDOM from 'prismic-dom';
import linkResolver from './link-resolver';
import { Fragment, type Element } from 'react';
const { Elements } = PrismicDOM.RichText;

export type HtmlSerializer = (
  type: string,
  element: Object, // There are so many types here
  content: string,
  children: Element[],
  i: number
) => ?Element;

export const dropCapSerializer: HtmlSerializer = (
  type,
  element,
  content,
  children,
  i
) => {

function htmlSerializer (type, element, content, children) {
  const Elements = PrismicDOM.RichText.Elements;
  // give headings an ID
  switch(type) {
    case Elements.heading1:
    case Elements.heading2:
    case Elements.heading3:
    case Elements.heading4:
    case Elements.heading5:
    case Elements.heading6:
      const level = type[type.length -1]
      const id = children.join('')
                         .trim()
                         .toLowerCase()
                         .replace(/(&\w+;)/g, '')
                         .replace(/([^a-z\-\ ])/g, '')
                         .replace(/ /g, '-')
                         .replace(/--/g, '-');

function parsePublishedDate(doc) {
  // We fallback to `Date.now()` in case we're in preview and don't have a published date
  // This is because we need to have a separate `publishDate` for articles imported from WP
  return PrismicDate(doc.data.publishDate || doc.first_publication_date || Date.now());
}

const node = await api.getByID(value.id, { fetchLinks })

        node.data = await normalizeBrowserFields({
          ...args,
          value: node.data,
          node: node,
        })

        // Now that we have this node's normallized data, place it in our cache.
        store.set(value.id, node)
      }

      return new Proxy(
        {
          ...value,
          url: PrismicDOM.Link.url(value, linkResolver),
          target: value.target || '',
          raw: value,
        },
        {
          get: (obj, prop) => {
            if (obj.hasOwnProperty(prop)) return obj[prop]
            if (prop === 'document') return [store.get(value.id)]
          },
        },
      )

    case 'Media':
    case 'Web':
      return {
        ...value,
        target: value.target || '',

const proxyHandler = {
    get: (obj, prop) => {
      if (prop === 'document') {
        if (value.link_type === 'Document' && value.type !== 'broken_type') return getNodeById(linkedDocId)

        return null
      }

      return obj[prop]
    },
  }
  return new Proxy(
    {
      ...value,
      url: PrismicDOM.Link.url(value, linkResolverForField),
      raw: value,
      document: null, // TODO: ???????
    },
    proxyHandler,
  )
}

export function asHtml(maybeContent: any) {
  // Prismic can send us empty html elements which can lead to unwanted UI in templates.
  // Check that `asText` wouldn't return an empty string.
  const isEmpty = !maybeContent || (asText(maybeContent) || '').trim() === '';
  return isEmpty ? null : RichText.asHtml(maybeContent, linkResolver).trim();
}

export function asHtml(
  maybeContent: ?HTMLString,
  htmlSerializer?: HtmlSerializer
) {
  // Prismic can send us empty html elements which can lead to unwanted UI in templates.
  // Check that `asText` wouldn't return an empty string.
  const isEmpty = !maybeContent || (asText(maybeContent) || '').trim() === '';
  return isEmpty
    ? null
    : RichText.asHtml(maybeContent, linkResolver, htmlSerializer).trim();
}

const normalizeRichTextField = (value, linkResolver, htmlSerializer) => ({
  html: PrismicDOM.RichText.asHtml(value, linkResolver, htmlSerializer),
  text: PrismicDOM.RichText.asText(value),
  raw: value,
})

const normalizeRichTextField = (value, linkResolver, htmlSerializer) => ({
  html: PrismicDOM.RichText.asHtml(value, linkResolver, htmlSerializer),
  text: PrismicDOM.RichText.asText(value),
  raw: value,
})

const normalizeRichTextField = (value, linkResolver, htmlSerializer) => ({
  html: PrismicDOM.RichText.asHtml(value, linkResolver, htmlSerializer),
  text: PrismicDOM.RichText.asText(value),
  raw: value,
})