Area Editável

documentação em andamento

O componente EditableArea é uma poderosa suplementação do componente CmsComponent, responsável por renderizar dinamicamente todos os componentes da página que foram definidos com um sliceWidget. Essa extensão permite que o cliente adicione ou remova componentes em uma página, tornando-a completamente editável pelo CMS.

Para implementar o EditableArea com Next.js, siga as etapas abaixo:

1. Importe as dependências necessárias:

import type { GetServerSideProps } from 'next'
import { M3Cms, type CmsComponentsDataResponse } from '@m3cms/api'
import {
  CmsPageProvider,
  EditableArea,
  type EditableAreaProps,
  CmsComponentSwitch,
} from '@m3cms/react'
import { isCmsPage as checkIsCmsPage } from '@m3cms/common'
import m3CmsConfig from 'm3cms.config'
import { allCmsComponents, TAGS } from 'src/cms'

2. Defina o tipo de dados para o CMSData e Props:

type CMSData = {
  [TAGS.editableArea]: EditableAreaProps
  [key: string]: Record<string, unknown>
}

export type PageProps = Props & {
  cmsData: CmsComponentsDataResponse<CMSData>
  isCmsPage: boolean
}

3. Implemente o componente Page que renderizará o conteúdo da página:

function Page({ cmsData, isCmsPage }: PageProps) {
  return (
    <>
      {/* ... Conteúdo do Next.js  ... */}
      
      {/* Inicializa o provedor do CMS para fornecer os dados para os componentes */}
      <CmsPageProvider />

      {/* Renderiza o componente EditableArea utilizando o CmsComponentSwitch */}
      <CmsComponentSwitch
        isCmsPage={isCmsPage}
        component={EditableArea}
        tag={TAGS.editableArea}
        content={cmsData[TAGS.editableArea]}
        nonMutableProps={{
          allCmsComponents,
          apiConfig: m3CmsConfig,
          tag: TAGS.editableArea,
        }}
        editableArea={{
          data: cmsData,
          allCmsComponents,
          children: cmsData?.[TAGS.editableArea]?.children ?? [],
        }}
      />
    </>
  )
}

4. Implemente a função getServerSideProps para buscar os dados da API do CMS e os dados da página Next.js:

export const getServerSideProps: GetServerSideProps<PageProps> = async ({ previewData, resolvedUrl }) => {
  const tagsArray = Object.values(TAGS)
  const editableAreaCmsData = await m3Cms.getCmsData(TAGS.editableArea)
  // Dentro das tags do editableArea, existem outras tags dos componente que foram gerados 
  // dinamicamente pelo CMS. Por isso, é necessário buscar os dados dessas tags também.
  const dynamicTags = getTagsOfEditableArea(editableAreaCmsData)
  const cmsData = await m3Cms.getCmsData<CMSData>([
    ...dynamicTags,
    ...tagsArray,
  ])

  return {
    props: {
      cmsData,
      isCmsPage: checkIsCmsPage(resolvedUrl),
    },
  }
}

function getTagsOfEditableArea(data: CmsComponentsDataResponse) {
  if (!(TAGS.editableArea in data)) return []

  const homeSlideData = data[TAGS.editableArea] as EditableAreaProps

  return homeSlideData.children.map(({ tag }) => tag)
}

Agora o componente EditableArea está integrado com Next.js e renderiza dinamicamente todos os componentes definidos nas configurações do CMS. O cliente tem a capacidade de adicionar e remover componentes na página por meio do CMS, tornando-a completamente editável e personalizável.

info

Atualmente o projeto está em fase beta logo algumas funcionalidades ainda estão um pouco verbosas. Mas estamos trabalhando para melhorar isso.

Areas Editáveis para diferentes paginas

Para isso use diferentes tags para cada area editável.