Draft5 Post Content Renderer

Esta é uma biblioteca criada com create-react-library v3.1.1 para apenas a renderização do plugin para wordpress Guttenberg v9.8.2 dentro dos projetos da Draft5.

Install

npm install --save draft5-post-content-renderer

Uso

Para utilizar a biblioteca basta compilar um array de objetos no formato

{
  "blockName": "core/heading",
  "attrs": {
    "level": 1,
    "content": "Heading H1"
  },
  "innerBlocks": [],
  "innerHTML": "<h1>Heading H1</h1>",
  "innerContent": ["<h1>Heading H1</h1>"]
}

Dentro do componente

import React, { Component } from 'react'

import PostParser from 'draft5-post-content-renderer'
import 'draft5-post-content-renderer/dist/index.css'

class YourComponent extends Component {
  render() {
    return <PostParser postContent={ObjetoFormatado} />
  }
}

Lista de "attrs" por "blockName"

Cada bloco possui necessidades de attrs diferentes, aqui segue a lista:

core/columns (bloco recursivo)

• Não há a necessidade de attrs, apenas de innerBlocks

core/column (bloco recursivo)

• Não há a necessidade de attrs, apenas de innerBlocks

core-embed/twitter

• url: link do tweet a ser embedado (string)
• tweetId: codigo do tweet a ser embedado (string)

core-embed/youtube

• videoId: codigo do video a ser embedado (string)

core/html

• Não há a necessidade de attrs, apenas do innerHtml

core/heading

• level: nível do titulo (1 = h1, 2 = h2, ...) (number)
• content: conteúdo do título (string)

core/image

• imageUrl: endereço da imagem (string)
• caption: descrição da imagem (string)

core/list

• listItems: lista de textos a serem listados (array de string)

draft5/match-card

• matchData: objeto com informações da partida (object)

core/quote

• quote: texto citado
• author: nome do autor

core/separator

• Não há necessidade de attrs

Caso o bloco não possua um nome ele será tratado como um bloco do tipo "core/html"

License

MIT © Draft5