Desenvolvedores
src_
blocks
PerguntaDissertativa.ts

📝 Bloco de Pergunta Dissertativa no PayloadCMS

O PerguntaDissertativa é um bloco criado para armazenar perguntas em formato dissertativo dentro do PayloadCMS. Ele utiliza um editor de texto rico baseado no Lexical, permitindo formatação avançada no enunciado da pergunta.

🚀 Estrutura do Bloco

A estrutura do bloco segue o formato padrão do PayloadCMS, contendo:

  • slug: Define um identificador único do bloco.
  • labels: Nomes no singular e plural para exibição no painel administrativo.
  • fields: Lista os campos que compõem o bloco, incluindo o enunciado da pergunta.
import { Block } from 'payload'  
import {  
  lexicalEditor,  
  FixedToolbarFeature,  
  InlineToolbarFeature,  
} from '@payloadcms/richtext-lexical'  

🔹 Aqui importamos os módulos necessários:

  • Block: Representa a estrutura de um bloco no PayloadCMS.
  • lexicalEditor: Editor de texto baseado no Lexical.
  • FixedToolbarFeature: Adiciona uma barra de ferramentas fixa ao editor.
  • InlineToolbarFeature: Adiciona uma barra de ferramentas flutuante para edição inline.

🏗️ Definição do Bloco

const PerguntaDissertativa: Block = {  
  slug: 'PerguntaDissertativa', // 🏷️ Identificador do bloco  
  labels: {  
    singular: 'Pergunta Dissertativa',  
    plural: 'Perguntas Dissertativas',  
  },  

🔹 O slug define o identificador do bloco, que será usado internamente pelo PayloadCMS.
🔹 Os rótulos (labels) especificam os nomes para exibição no painel.


📌 Campo da Pergunta

  fields: [  
    {  
      name: 'pergunta',  
      label: 'Enunciado da Pergunta Dissertativa', // 📝 Texto da pergunta  
      type: 'richText',  
      editor: lexicalEditor({  
        features: ({ defaultFeatures }) => {  
          return [...defaultFeatures, FixedToolbarFeature(), InlineToolbarFeature()]  
        },  
      }),  
      required: true,  
    },  
  ],  
}

🔹 name: 'pergunta' → Define o identificador do campo.
🔹 label: 'Enunciado da Pergunta Dissertativa' → Nome que aparecerá no painel administrativo.
🔹 type: 'richText' → Permite o uso do editor de texto avançado.
🔹 editor: lexicalEditor({...}) → Configura o editor com recursos extras.
🔹 required: true → Torna o campo obrigatório.


🔥 Conclusão

Esse bloco é ideal para sistemas de provas, quizzes e formulários onde perguntas dissertativas são necessárias. Ele permite o uso de formatação avançada, tornando a experiência mais interativa.


📜 Código Completo

import { Block } from 'payload'  
import {  
  lexicalEditor,  
  FixedToolbarFeature,  
  InlineToolbarFeature,  
} from '@payloadcms/richtext-lexical'  
 
const PerguntaDissertativa: Block = {  
  slug: 'PerguntaDissertativa',  
  labels: {  
    singular: 'Pergunta Dissertativa',  
    plural: 'Perguntas Dissertativas',  
  },  
  fields: [  
    {  
      name: 'pergunta',  
      label: 'Enunciado da Pergunta Dissertativa',  
      type: 'richText',  
      editor: lexicalEditor({  
        features: ({ defaultFeatures }) => {  
          return [...defaultFeatures, FixedToolbarFeature(), InlineToolbarFeature()]  
        },  
      }),  
      required: true,  
    },  
  ],  
}  
 
export default PerguntaDissertativa