style(preview_onFocus): try_add_borders_in_field_preview_when_edit_field_is_onFocus #20
Conversation
| style={{ | ||
| borderStyle: | ||
| props?.field.get('name') === window?.previewStyle?.name && props?.field.get('label') === window?.previewStyle?.label | ||
| ? 'dotted' : 'none' | ||
| }}> |
There was a problem hiding this comment.
na verdade nem era necessário mexer nos previews padrão de cada widget, isso é só pro custom preview, nesse caso nenhum WidgetPreviewContainer é usado 😬
https://www.netlifycms.org/docs/customization/#registerpreviewtemplate
There was a problem hiding this comment.
Peguei pelos WidgetPreviewContainer pq eles envolvem o componente, então a borda fica certa em volta do componente
There was a problem hiding this comment.
Então, mas o WidgetPreviewContainer só é usado quando não há custom preview template, portanto no nosso CMS o WidgetPreviewContainer de cada widget nunca é usado:
Isso é um print do nosso custom preview, se estivéssemos usando os previews padrão de cada componente não apareceria dessa forma...
No nosso caso não temos um preview para cada widget (até porque como tem o list widgets variable types pras sections, não adiantaria ter um preview por widget), temos um único componente pro preview que renderiza a página inteira, sacou?
| const name = field.get('name'); | ||
| window.previewStyle = { | ||
| name: field.get('name'), | ||
| label: field.get('label'), |
There was a problem hiding this comment.
O label aqui funciona com nested props?
Por exemplo, ficaria settings.primary_color ou só primary_color?
There was a problem hiding this comment.
Humm esse label é para identificar o componente que foi triggado. Posso montar o objeto de outra forma.
Seria colocar as características da borda ai nesse componente, isso?
There was a problem hiding this comment.
Não não, na verdade seria pra eu conseguir identificar o field que foi alterado em nested objects...
Um exemplo com as sections:
"sections": [
{
"type": "banner",
"image": {
"src": ""
}
}
]Se ele editar a imagem do banner, eu só conseguiria identificar qual elemento foi alterado se o field vier algo como sections[0].image.src (dot notation), se vier só como src não tem como a gente saber no custom preview qual banner está sendo alterado, e portanto não teria como colocar a borda no banner certo, faz sentido?
netlify-cms@2/packages/netlify-cms-core/src/reducers/entryDraft.js
Outdated
Show resolved
Hide resolved
Issue https://github.com/ecomplus/storefront-cms/issues/11
PR acionando o onFocus, porém sem receber o evento no preview!