Pular para o conteúdo principal

Editor visual

O editor visual é um campo de modelos que representa uma combinação de diversas informações (textos, imagens, vídeos e etc.) que podem ser customizados de diversas formas. Normalmente é utilizado para fazer o "corpo" de postagens de blogs, e é muito útil para criar um conteúdo mais robusto e elaborado sem precisar ter vários campos, afinal, seu tamanho é definido pela quantidade de conteúdo presente nele. Nessa seção, explicaremos como utilizá-lo e quais tipos de "blocos" de conteúdo poderão ser utilizados.

Blocos​

Blocos são as unidades de conteúdo dentro de um editor visual. Pense neles como os campos dos modelos - como o editor visual já é um campo, os blocos são os seus "sub-campos" que podem ser modificados dependendo do seu tipo de conteúdo. Para criar um bloco, basta clicar no botão de Adicionar (+) que estará na parte esquerda do editor. Para mover verticalmente ou apagar um bloco, basta clicar no botão de Opções (⠿) que estará ao lado do botão de Adicionar explicado acima.

Representação no JSON​

Antes de explicar os tipos de blocos presentes no editor visual, precisamos falar sobre como o editor "exporta" os seus dados. O conjunto dos dados do editor visual é um objeto JSON com essa estrutura:

{
  "time": 1682617619822,
  "blocks": [
    {
      "id": "5E0IRBDrCw",
      "data": {
        "text": "Eu sou um texto!"
      },
      "type": "paragraph"
    },
    {
      "id": "zTnuVyJ5FS",
      "data": {
        "url": "https://youtu.be/dQw4w9WgXcQ",
        "html": "<iframe src='https://www.youtube.com/embed/dQw4w9WgXcQ' ></iframe>",
        "type": "embed",
        "width": "justify",
        "caption": "",
        "service": "youtube",
        "videoId": "dQw4w9WgXcQ"
      },
      "type": "video"
    }
  ],
  "version": "2.27.0"
}

As propriedades time e version são metadados, e indicam quando o conteúdo foi salvo e qual a versão do Editor Visual gerou esse conteúdo. A propriedade blocks é um array que contem o conteúdo dos blocos salvos pelo editor. Cada bloco dentro desse array tem as seguintes propriedades:

  • id: um string com um hash único que identifica o bloco. Essa string é única dentre os blocos de um mesmo array.
  • type: uma string que indica o tipo do bloco, como paragraph, image, list, dentre outros. Os tipos de bloco disponíveis estão documentados abaixo.
  • data: um objeto que contém o conteúdo do bloco em si. Por exemplo, blocos do tipo paragraph contém um parâmetro text com seu conteúdo. O conteúdo dessa propriedade depende do tipo do bloco.

Se você quiser saber mais sobre esses tipos e propriedades, consulte a documentação do SDK.

Texto​

O bloco de texto permite que você escreva uma ou mais linhas de texto customizáveis. Por padrão, os blocos do editor visual são blocos de texto, e o editor sempre é iniciado com um bloco desse tipo. Além disso, você pode apertar Enter para criar uma nova linha de texto e, portanto, um novo bloco de texto. Ou seja, no caso dos blocos de texto, você pode simplesmente escrever como se estivesse usando o Word ou o Google Docs, por exemplo.

O tipo e as propriedades do bloco de texto no JSON podem ser encontrados na documentação do SDK.

Customizando o bloco de texto​

Ao selecionar um ou mais caracteres de um bloco de texto, aparecerá um painel de opções abaixo dele. Por meio deste, você poderá modificar o texto selecionado de diversas formas clicando em uma opção do painel:

  • Converter para: Converterá toda aquela linha (e não só o texto selecionado) para um bloco do tipo selecionado.
  • Negrito: O texto selecionado ficará em negrito (como este).
  • Itálico: O texto selecionado ficará em itálico (como este).
  • Link: O texto selecionado será um hiperlink para uma URL (como este) informada em um sub-painel que aparecerá abaixo.
  • Sublinhado: O texto selecionado ficará sublinhado (como este).
  • Subscrito: O texto selecionado ficará subscrito (pequeno e na parte inferior, como ₑₛₜₑ).
  • Sobrescrito: O texto selecionado ficará sobrescrito (pequeno e na parte superior, como ᵉˢᵗᵉ).
  • Estilo: O texto selecionado será customizado com o estilo escolhido no sub-painel que aparecerá abaixo. Você poderá escolher dentre 9 opções de cores de destaque ("marca-texto") e 9 opções de cores de texto, e pode escolher até uma cor de destaque e uma cor de texto (isto é, você poderá ter os 2 estilos simultaneamente).

HTML​

O bloco de HTML permite que você escreva código HTML que será renderizado na sua aplicação. Por meio dele, você pode ir além dos limites dos campos do modelo e dos blocos do editor visual e criar um visual próprio, caso seja necessário.

Sobre tags H1

Você pode utilizar tags <h1> nesse bloco, mas isso poderá afetar o SEO se isso resultar na página ter mais de um <h1>.

O tipo e as propriedades do bloco de HTML no JSON podem ser encontrados na documentação do SDK.

Cabeçalho​

O bloco de cabeçalho permite que você crie textos maiores e com mais destaque. Geralmente são utilizados para escrever títulos e subtítulos de alguma coisa.

O tipo e as propriedades do bloco de cabeçalho no JSON podem ser encontrados na documentação do SDK.

Customizando o bloco de cabeçalho​

Para mudar o tamanho do cabeçalho, aperte no botão de Opções (⠿) na esquerda. Por padrão, ele será um H2, e pode ser customizado para ser desde um H1 até um H6 (quanto maior o número do "H", menor o texto).

Além disso, ao selecionar um ou mais caracteres de um bloco de cabeçalho, aparecerá um painel de opções abaixo dele. Por meio deste, você poderá modificar o texto selecionado de diversas formas clicando em uma opção do painel:

  • Converter para: Converterá toda aquela linha (e não só o texto selecionado) para um bloco do tipo selecionado.
  • Link: O texto selecionado será um hiperlink para uma URL (como este) informada em um sub-painel que aparecerá abaixo.
  • Itálico: O texto selecionado ficará em itálico (como este).
  • Sublinhado: O texto selecionado ficará sublinhado (como este).
  • Tachado: O texto selecionado ficará tachado (como este).
  • Estilo: O texto selecionado será customizado com o estilo escolhido no sub-painel que aparecerá abaixo. Você poderá escolher dentre 9 opções de cores de destaque ("marca-texto") e 9 opções de cores de texto, e pode escolher até uma cor de destaque e uma cor de texto (isto é, você poderá ter os 2 estilos simultaneamente).

Imagem​

O bloco de imagem permite que você coloque imagens no seu conteúdo visual. Ao criar o bloco, você terá duas opções: "Selecionar" e "Inserir URL". Com a de "Selecionar", você poderá selecionar uma imagem que já existe no Starlight ou enviar um arquivo do seu próprio computador (com o botão de "Enviar arquivo(s)" no canto superior-direito). Já com a de "Inserir URL" você poderá enviar uma imagem a partir de uma URL.

O tipo e as propriedades do bloco de imagem no JSON podem ser encontrados na documentação do SDK.

Customizando o bloco de imagem​

Ao fornecer uma imagem para o bloco, ela aparecerá junto com 2 botões no canto inferior-direito. O primeiro é utilizado para trocar a imagem (e inclui as mesmas opções de Selecionar e Inserir URL) e o segundo abrirá um painel de configurações logo abaixo da imagem, com diversas opções.

A primeira categoria de configurações se chama Resolução e ela somente aparecerá se a imagem fornecida for do próprio Starlight - isto é, não aparecerá para imagens fornecidas por URL. Nela, temos uma checkbox (ligada por padrão) que indica se a imagem é responsiva. Uma imagem responsiva terá sua resolução escolhida automaticamente pelo navegador baseado na resolução da tela do usuário. Se ela não for responsiva, você poderá escolher uma das "variações" da imagem, que são geradas pelo próprio Starlight ao ser enviada para o sistema. Cada variação tem a sua resolução e tamanho informados, e deverá ser selecionada de acordo com o seu uso (por exemplo, ícones que serão mostrados em um tamanho pequeno idealmente devem usar a variação de miniatura).

A segunda categoria se chama Largura da imagem, que servirá para você alterar a largura da imagem (e por consequência a sua altura também, já que as proporções irão se manter). Nela temos 4 opções:

  • Fixa: Uma largura fixa em pixels ou em % da tela.
  • Automática: Uma largura automática, igual à largura original da imagem.
  • Justificar ao texto: Uma largura igual àquela de uma linha completa de texto.
  • Máxima: A maior largura possível, preenchendo o máximo de espaço horizontal possível.

A terceira categoria se chama Outras informações, com 3 campos de texto (todos opcionais):

  • Legenda da imagem: Uma legenda que será exibida embaixo da imagem.
  • Texto alternativo: Descreverá a imagem para pessoas com deficiências visuais, assim melhorando a acessibilidade da sua aplicação.
  • Link: Um link que será aberto ao clicar na imagem.

Lista​

O bloco de lista permite que você crie listas de textos. Cada item da lista funciona similar a um bloco de texto. A lista pode ser de itens ou numerada, e você pode alternar entre esses 2 tipos clicando no botão de Opções (⠿) na esquerda. Além disso, você também poderá aninhar listas (isto é, listas onde cada item é uma lista, onde cada item desta também pode ser uma lista, etc.).

O tipo e as propriedades do bloco de lista no JSON podem ser encontrados na documentação do SDK.

Vídeo​

O bloco de vídeo permite que você coloque vídeos no seu conteúdo visual. Ao criar o bloco, você terá que informar o vídeo com o botão de "Incorporar", que abrirá um pop-up com um campo para você informar a URL. Esse pop-up também informa os serviços suportados pelo bloco de vídeo (como o YouTube e o Vimeo). Esse bloco tem um funcionamento similar ao bloco de imagem, com menos opções.

O tipo e as propriedades do bloco de vídeo no JSON podem ser encontrados na documentação do SDK.

Customizando o bloco de vídeo​

Ao fornecer uma vídeo para o bloco, ela aparecerá junto com 2 botões no canto inferior-direito. O primeiro é utilizado para trocar o vídeo (com a opção de "Incorporar") e o segundo abrirá um painel de configurações logo abaixo do vídeo com algumas opções, similar ao bloco de imagem.

A primeira categoria de configurações se chama Largura do vídeo, que servirá para você alterar a largura do vídeo, e por consequência a sua altura também, já que as proporções irão se manter. Nela temos 3 opções:

  • Fixa: Uma largura fixa em pixels ou em % da tela.
  • Justificar ao texto: Uma largura igual àquela de uma linha completa de texto.
  • Máxima: A maior largura possível, preenchendo o máximo de espaço horizontal possível.

A segunda categoria se chama Outras informações, que atualmente só conta com o campo de texto de Legenda do vídeo, que é uma legenda opcional exibida embaixo do vídeo.