PostEditor

PostEditor é a tela de edição de um post ou de uma página do painel. Ele monta duas colunas: à esquerda, o formulário do texto; à direita, a coluna de publicação, com o estado do post, as ações de publicação, a capa, o autor, a série, as categorias e as tags. Os módulos podem acrescentar campos e painéis próprios nessa coluna.

Quando usar

Use se a sua tela edita um registro com texto, capa e um ciclo de publicação. Para editar só os campos de uma página (sem estado, histórico nem pré-visualização), use a opção page: nesse caso o editor mostra só o botão «Salvar» e os campos que você passar (ui/panel/post-editor.ts:70 a :73).

Comportamentos que você precisa conhecer:

• As ações depois de «Salvar» dependem do papel (autor ou editor) e do estado (rascunho, em-revisao, agendado, publicado ou arquivado). A tabela está em ui/panel/post-editor.ts:102 a :130. Um autor com o post em revisão vê «Aguardando aprovação», desabilitado. Um editor com o post em revisão vê «Aprovar e publicar», «Agendar» e «Devolver ao autor».
• A linha de estado mostra o rótulo do estado e o horário do último salvamento automático: «Salvo automaticamente às» seguido da hora, ou «Ainda não salvo» (ui/panel/post-editor.ts:148).
• Os campos de categoria e tags são os do próprio editor, a não ser que você passe extensionFields. Quando passa, a lista toma o lugar desses dois campos (ui/panel/post-editor.ts:42), mesmo vazia.
• railPanels põe painéis de módulos na coluna, como o «SEO do post», que o módulo SEO adiciona (modules/seo/module.ts:45).
• A capa tem os botões «Escolher na biblioteca» e «Remover capa» quando você passa as intenções (ui/panel/post-editor.ts:243). Sem capa, a coluna diz «Sem imagem de capa.» (ui/panel/post-editor.ts:239).

Onde aparece no painel

• Editor de post (/painel/posts/editor): o título registrado é «Editor de post» (screens.json, rota GET /painel/posts/editor). O h1 da tela é «Novo post» para um post novo e «Editar «título do post»» para um existente (modules/posts/screens/page.ts:218). A captura da galeria usa o h1 «Editar post» (ui/panel/post-editor.gallery.ts:96). O componente é montado em modules/posts/screens/page.ts:216, com os painéis de módulos em modules/posts/screens/page.ts:206.
• Editor de página (/painel/paginas/editor, e /painel/paginas/editor/:id): modules/paginas/editor.ts:80, com o painel «SEO do post» em modules/paginas/editor.ts:103. Nesse editor, o botão é só «Salvar».

Variantes e propriedades

PostEditor

Pasta: ui/panel

Variantes

Id	Variante	Tom
post-editor-rascunho-autor-light	rascunho-autor	light
post-editor-rascunho-autor-dark	rascunho-autor	dark
post-editor-publicado-editor-light	publicado-editor	light

Propriedades

Propriedade	Tipo	Obrigatória	Descrição
action	string	Sim	Target of the POST form.
csrf	string	Sim	—
state	"rascunho" | "em-revisao" | "agendado" | "publicado" | "arquivado"	Sim	—
role	PostEditorRole	Sim	—
values	Readonly<Record<string, string>>	Sim	Values by field name: title, slug, summary, author, publishAt, category, tags, series, seriesPart, featured.
errors	Readonly<Record<string, string>>	Não	Messages by field name (`body` for the document); the `form` key is the message of the whole form.
blocksJson	string	Sim	The `RichDoc` as JSON text: the content of the body textarea, edited in place by the `editor` island.
choices	PostEditorChoices	Não	—
extensionFields	readonly PanelField[]	Não	Fields other modules add to the post (e.g. `categoria`, `tags`, `comentariosAbertos`), already built, in the order they show. When given (even empty) they take the place of the editor's own category and tags fields.
railPanels	readonly SafeHtml[]	Não	Extension panels of the modules (e.g. "SEO do post"), shown under the own fields as ordinary rail panels.
readingMinutes	number	Não	—
cover	{ readonly id: string; readonly url: string; readonly alt: string; }	Não	Cover image of the post; its id goes back in the hidden `coverId` field.
coverHrefs	{ readonly pick: string; readonly remove: string; }	Não	Plain links of the cover slot (they work without JS): the library picker and the removal.
coverIntents	{ readonly pick: string; readonly remove: string; }	Não	Intents (the `intent` button value) of the cover slot: «Escolher» and «Remover capa» become buttons of the form, so the screen saves the post before it leaves for the library or clears the cover. Wins over `coverHrefs`.
commentsOpen	{ readonly count: number; readonly href: string; }	Não	—
historyHref	string	Não	—
revisions	number	Não	—
previewHref	string	Não	—
savedAt	string	Não	Time of the last autosave, already formatted (e.g. "14:32").
autosaveUrl	string	Não	Endpoint the autosave posts to; only exposed as a data attribute.
slugPrefix	string	Não	Address shown before the slug control (e.g. `exemplo.com.br/blog/`), as in `FormView`.
timeZone	string	Não	IANA zone «Agendar para» is shown in. Default `America/Sao_Paulo`.
hidden	Readonly<Record<string, string | readonly string[]>>	Não	Values posted with the form and never shown (e.g. the `version` the record had when it was read).
page	{ readonly fields: readonly PanelField[]; }	Não	Edits a page instead of a post: only «Salvar» (no state, history, preview or autosave) and a rail with these fields and the slug, nothing else. `state` and `role` are then ignored; `values` and `errors` are by field name.

Captura

A primeira variante do catálogo, o rascunho visto por um autor, em 1280 px:

A mesma variante em 360 px:

Origem

• ui/panel/post-editor.ts: PostEditor, PostEditorProps e as ações por papel e estado.
• ui/panel/post-editor.gallery.ts: as variantes do catálogo.
• modules/posts/screens/page.ts e modules/paginas/editor.ts: os dois usos no painel.