Adiciona contador de caracteres em tempo real no campo de postagem #1813
Conversation
|
@guilhermeabell is attempting to deploy a commit to the TabNews Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
Fala @guilhermeabell, obrigado pelo PR! 💪
Deixei alguns comentários no código além do que digo aqui.
...caso exceda o limite o botão de publicar é desabilitado e o contador fica vermelho.
É interessante desabilitar o botão em caso de erros de validação, mas seria bom deixar mais explícita a razão do botão estar desabilitado, mudando a estilização do campo para a estilização de erro, e talvez mostrando um texto explicativo. O texto que aparece hoje ao submeter está abaixo.
E na imagem vejo que não ficou muito legal o erro descolado do campo, e também que a fonte usada para a numeração está muito grande.
Ainda sobre desativar o botão, talvez seja bom fazer isso apenas se der para validar também os demais campos, então isso pode estar saindo do escopo, e seja melhor deixar para outro PR.
|
Opa @aprendendofelipe obrigado pelo review! só acho que nao vai fazer sentido incluir uma mensagem do motivo do disabled do botao. acho que marcar a textarea em vermelho + o counter em vermelho ( que já ocorre ) é autoexplicativo o suficiente e evita redundancias. Oque acha? |
There was a problem hiding this comment.
só acho que nao vai fazer sentido incluir uma mensagem do motivo do disabled do botao. acho que marcar a textarea em vermelho + o counter em vermelho ( que já ocorre ) é autoexplicativo o suficiente e evita redundancias. Oque acha?
Se for desabilitar o botão, acho melhor exibir um texto informativo. Mas não precisa desativar o botão nesse PR.
Independente disso, precisa adequar o posicionamento do erro de validação, pois ele vai continuar aparecendo em outras situações.
|
@aprendendofelipe acha válido desacoplar o componente CharacterCounter pra pasta components? já que pediu pra torna-lo o máximo genérico possível pra reutilizaçao |
There was a problem hiding this comment.
@aprendendofelipe acha válido desacoplar o componente CharacterCounter pra pasta components? já que pediu pra torna-lo o máximo genérico possível pra reutilizaçao
Meu comentário não foi sobre deixar o contador flexível, mas sim evitar quebrar o funcionamento atual do Editor, que não é utilizado exclusivamente no Content.
Com isso em mente, é até melhor nem mudar nada no Editor, e adicionar o contador diretamente no Content. Deixei comentários no código. 🤝
| // Editor is not part of Primer, so error messages and styling need to be created manually | ||
| export function Editor({ isValid, onKeyDown, compact, areLinksTrusted, clobberPrefix, ...props }) { | ||
| export function Editor({ isValid, onKeyDown, compact, areLinksTrusted, clobberPrefix, maxLength, value, ...props }) { |
There was a problem hiding this comment.
Agora precisa voltar a passar value para ByteMdEditor, pois antes ele recebia via ...props.
Mas, ao invés disso, que tal adicionar o contador diretamente lá no Content? Assim você não precisa se preocupar com o funcionamento do Editor, pois não precisaria mudar nada nesse arquivo aqui e nem na maneira de usar o Editor lá no Content.
Seria só modificar ali no trecho que começa com {errorObject?.key === 'body' && (, e isso também facilitará a criação de um layout compatível com a visualização de mensagens de erro.
| @@ -82,8 +82,23 @@ export default function Viewer({ value: _value, areLinksTrusted, clobberPrefix, | |||
| ); | |||
| } | |||
|
|
|||
| export function CharacterCounter({ text, maxLength }) { | |||
| const characterCount = useMemo(() => text.length, [text]); | |||
There was a problem hiding this comment.
Precisa do useMemo aqui?
|
Salve, galera! Sou o Zeni, recém chegado no curso.dev 😅 Tava dando uma olhada nos PRs e nas issues... Vocês estão de parabéns! Muito satisfatório ver as pessoas colaborando e debatendo!!! Sobre o PR em si, queria dar uma sugestão: e se o contador fosse decrescente e o background do texto ficasse vermelho para os caracteres que passaram do tamanho máximo? Fiz um "mock" do que pensei, usando o notion. Tenho certeza que já vi isso antes, mas não consigo lembrar aonde 🫠 👉 Mock
edit: navegando pelo linked in, encontrei uma versão real semelhante do que eu comentei, e do que esse PR traz. Achei legal porque ela é bem minimalista.
Importante notar que nesse exemplo acima, nenhum texto adicional aparece. O LinkedIn apenas confia no bom-senso, no contador e na cor vermelha 😄 |
Mudanças realizadas
Conforme relatado na issue #1806 hoje não existe um contador de caracteres no componente de postagens, isso acaba dificultando pois o autor da postagem só consegue saber que ultrapassou o limite de caracteres ao publicar.
Dito isso, foi implementado um contador de caracteres apenas para o corpo da postagem que é incrementado em tempo real conforme o autor da postagem digita no campo, e caso exceda o limite o botão de publicar é desabilitado e o contador fica vermelho.
Resolve #1806
[x] Nova funcionalidade
Checklist: