sanity-content.ts

import defu from 'defu'
import type { CreateElement, VNode, VNodeData, VueConstructor } from 'vue'

// eslint-disable-next-line
import type { SanityConfiguration } from '..'
import { extendVue } from './vue'

interface MarkDefs {
  _key: string
  _type: string
  [key: string]: string
}

interface Children {
  _key: string
  _type: string
  marks: string[]
  text: string
}

interface Block {
  _type: 'block'
  _key: string
  children: Children[]
  level?: number
  listItem?: string
  markDefs: MarkDefs[]
  style: string
}

interface CustomBlock {
  _type: 'custom'
  _key: string
  [key: string]: any
}

interface List {
  _type: 'list'
  children: Array<CustomBlock | Block | List>
  [key: string]: any
}

export interface Serializers {
  /**
   * block components or elements that render non-blocks
   */
  types?: Record<
    string,
    VueConstructor<Vue> | (() => VueConstructor<Vue>) | string
  >
  /**
   * inline components or elements
   */
  marks?: Record<
    string,
    VueConstructor<Vue> | (() => VueConstructor<Vue>) | string
  >
  /**
   * block components or elements that wrap blocks instead of `<p>` tags
   */
  styles?: Record<
    string,
    VueConstructor<Vue> | (() => VueConstructor<Vue>) | string
  >
  listItem?: VueConstructor<Vue> | string
  container?: VueConstructor<Vue> | string
}

const defaults: Required<Serializers> = {
  types: {
    span: 'span',
    image: 'img',
  },
  marks: {
    strong: 'strong',
    em: 'em',
    link: 'a',
  },
  styles: {
    h1: 'h1',
    h2: 'h2',
    h3: 'h3',
    h4: 'h4',
    h5: 'h5',
    h6: 'h6',
    normal: 'p',
    blockquote: 'blockquote',
  },
  listItem: 'li',
  container: 'div',
}

let level = 1

function getProps (item?: Record<string, any>) {
  if (!item) {
    return {}
  }

  const obj = Object.entries(item).reduce(
    (obj, [key, value]) => {
      switch (true) {
        case ['_key', 'key'].includes(key):
          obj.key = value || null
          return obj

        case ['class', 'href', 'src'].includes(key):
          obj.attrs![key] = value
          return obj

        // Types to exclude completely
        case ['_type'].includes(key):
          return obj

        // Pass everything else as props
        default:
          obj.props![key] = value
          return obj
      }
    },
    {
      props: {},
      attrs: {},
    } as VNodeData,
  )

  obj.props = {
    level,
    ...obj.props,
  }
  return obj
}

function findSerializer (
  item: CustomBlock | Block | List | Block['markDefs'][number] | undefined,
  serializers: Required<Serializers>,
) {
  if (!item) return undefined

  const { _type, listItem } = item

  return listItem
    ? serializers.listItem || 'li'
    : _type && _type in serializers.types
      ? serializers.types[_type]
      : _type && _type in serializers.marks
        ? serializers.marks[_type]
        : undefined
}

function wrapStyle (
  h: CreateElement,
  { style, listItem }: CustomBlock | Block | List,
  serializers: Required<Serializers>,
  children: Array<VNode | string>,
) {
  const matches = style ? style.match(/^h(\d)$/) : []
  if (!listItem && matches && matches.length > 1) {
    level = Number(matches[1])
  }
  if (!listItem && style && serializers.styles[style]) {
    return h(serializers.styles[style], {}, children)
  }

  return children
}

function wrapInSerializer (
  h: CreateElement,
  item: CustomBlock | Block | List | Block['markDefs'][number],
  content: Array<VNode | string>,
  serializers: Required<Serializers>,
) {
  const serializer = findSerializer(item, serializers)
  if (!serializer) return content

  return [h(serializer, getProps(item), content)]
}

function wrapMarks (
  h: CreateElement,
  content: VNode | string,
  [mark, ...marks]: Block['children'][number]['marks'] = [],
  serializers: Required<Serializers> = defaults,
  markDefs: Block['markDefs'] = [],
): VNode | string {
  if (!mark) return content

  const definition =
    mark in serializers.marks
      ? { _type: mark, _key: '' }
      : markDefs.find(m => m._key === mark)

  return h(
    findSerializer(definition, serializers) || 'span',
    getProps(definition),
    [wrapMarks(h, content, marks, serializers, markDefs)],
  )
}

function walkList (
  blocks: Array<CustomBlock | Block | List>,
  block: CustomBlock | Block | List,
) {
  const { length } = blocks

  // Not a list item
  if (!block.level) {
    blocks.push(block)
    return blocks
  }

  const { _type, children, level } = blocks[length - 1] || {}
  if (_type === 'list' && children) {
    if (level === block.level) {
      children.push(block)
    } else {
      walkList(children, block)
    }
  } else {
    blocks.push({
      _type: 'list',
      children: [block],
      level: block.level,
    } as List)
  }

  return blocks
}

function renderBlocks (
  h: CreateElement,
  blocks: Array<CustomBlock | Block | List>,
  serializers: Required<Serializers>,
  nested = false,
) {
  const nestedBlocks = nested
    ? blocks
    : blocks.reduce(walkList, [] as Array<Block | CustomBlock | List>)

  return nestedBlocks.map((block) => {
    const node = wrapStyle(
      h,
      block,
      serializers,
      wrapInSerializer(
        h,
        block,
        block._type === 'block'
          ? (block.children || []).map(child =>
              child._type !== 'span'
                ? h(findSerializer(child as CustomBlock, serializers) || 'span', getProps(child), [wrapMarks(h, child.text, child.marks, serializers, block.markDefs)])
                : wrapMarks(h, child.text, child.marks, serializers, block.markDefs),
            )
          : [],
        serializers,
      ),
    )
    if (process.env.NODE_ENV === 'development') {
      if (!node || (Array.isArray(node) && !node.length))
        // eslint-disable-next-line
        console.warn(
          `No serializer found for block type "${block._type}".`,
          block,
        )
    }
    return node
  })
}

export const SanityContent = extendVue({
  name: 'SanityContent',
  functional: true,
  props: {
    blocks: {
      type: Array as () => Array<CustomBlock | Block>,
      default: () => [] as Array<CustomBlock | Block>,
    },
    serializers: {
      type: Object as () => Serializers,
      default: () => ({} as Serializers),
    },
    renderContainerOnSingleChild: { type: Boolean, default: false },
  },
  render (h, { props, data }) {
    const serializers = defu(
      props.serializers,
      defaults,
    ) as Required<Serializers>

    serializers.types.list =
      serializers.types.list ||
      extendVue({
        name: 'ListComponent',
        functional: true,
        props: {
          children: {
            type: Array as () => Array<Block | CustomBlock | List>,
            default: () => [],
          },
        },
        render (h, { props }) {
          const tag =
            props.children.length && props.children[0].listItem === 'number'
              ? 'ol'
              : 'ul'
          return h(tag, {}, renderBlocks(h, props.children, serializers, true))
        },
      })

    return h(
      serializers.container,
      data,
      renderBlocks(h, props.blocks || [], serializers),
    )
  },
})

export default SanityContent