README
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