Botão removedor de imagem para a pré-visualização do compositor

Olá,

Estou apenas pensando em um novo recurso para excluir facilmente imagens do composer. Muitas vezes acontece que, quando o usuário carrega mais de uma imagem e deseja excluir apenas uma delas, é realmente complicado se o usuário não estiver familiarizado com markdown. Claro que eles tentam, mas o resultado geralmente são alguns links quebrados, etc…

Houve uma modificação com o texto alternativo da imagem que funciona muito bem e é fácil de usar. Ele adiciona a capacidade de editar o texto alternativo no lado da pré-visualização.


Seria incrível colocar um botão de exclusão na imagem no lado da pré-visualização. Talvez um ícone de :wastebasket: ou um X no canto da imagem e, ao clicar nesse botão, ele possa direcionar e remover o código markdown real da imagem. :slightly_smiling_face:

Obrigado :slightly_smiling_face:

8 curtidas

Obrigado Don, parece um botão útil e provavelmente não é muito difícil de adicionar. Marcarei isso como pr-welcome, ficarei feliz em ver isso adicionado.

3 curtidas

Estou trabalhando para resolver isso; quase tenho uma prova de conceito funcional.
Tenho apenas uma confusão entre esses dois componentes d-editor.js e composer-editor,js. Minha solução até agora é baseada em ouvir o conteúdo de pré-visualização/html quando atualizado dentro do componente d-editor.js… etc.
Estou na direção certa?

1 curtida

O local mais apropriado para excluir uma imagem seria ao lado dos botões que exibimos ao passar o mouse para redimensionar imagens e adicionar texto alternativo na visualização do composer.

image

O hook para excluir a marcação da imagem deve ser muito semelhante aos botões de 100%/75%/50%. Você pode ver aqui como o dimensionamento da imagem é feito.

2 curtidas

Estou um pouco indeciso sobre adicionar isso lá, pois parece tão raro precisar e adicionará ruído visual.

Acho que um ícone de “lixeira” alinhado à direita dessa linha, para que não fique muito perto do botão de edição?

@awesomerobot o que você acha?

Além disso, me pergunto se a ordem das operações aqui está correta, girar e cortar é mais importante?

3 curtidas

Para apenas adicionar um botão de exclusão, poderíamos fazer:

Mover o botão de edição para a esquerda (bônus: menor distância do mouse para a entrada do compositor) e, em seguida, colocar o botão de exclusão à direita… assim, temos alguma distância entre ações inofensivas e perigosas.

Outras melhorias bem-vindas:

  • tornar o ícone de edição azul como os de 50%, 75%
  • manter o texto preto, mas torná-lo clicável para a entrada também
  • quando o editor de título estiver aberto, podemos posicioná-lo para corresponder à linha de base do texto de visualização (então uma camada z acima)? Isso torna as coisas menos instáveis ao clicar:

Este é um escopo maior, mas com rotação e corte, poderíamos querer um tipo de menu totalmente diferente?

http://notion.so tem um bom exemplo:

Então, eles têm seu botão com um monte de opções, o dimensionamento é clicar e arrastar nas alças…

Um pequeno detalhe agradável é que, se você adicionar uma imagem muito pequena para a sobreposição do botão, eles forçam a imagem a uma escala que contém o botão assim que você tenta interagir com ela. Isso evita ter um botão ao passar o mouse que se sobrepõe a qualquer conteúdo circundante.

7 curtidas

@awesomerobot Obrigado pelo seu feedback. Tenho outra pergunta para garantir que estamos alinhados. Em relação a este ponto:

Como existem dois cenários para o contêiner dos “botões de escala” aparecer junto com o “botão de edição alternativo”

Normalmente, eles aparecem na mesma linha; no entanto, quando o texto alternativo é longo, o contêiner alternativo transbordará para a próxima linha:

Mesma linha

Transbordo

Agora, voltando aos seus pontos acima; faria sentido assumindo que você quer que o comportamento de transbordo seja o padrão. Caso contrário, para alternativas curtas, o botão de exclusão seria apenas o botão de fechar edição alternativa.

Outra alternativa é apenas mostrar o contêiner alternativo antes dos botões de escala, por exemplo:

Mesma linha:

Transbordo:

Portanto, fica claro que o botão de exclusão vem depois de 50%, mas não está claro como isso funcionaria nos dois cenários acima.

2 curtidas

[Atualização]

Segui a segunda abordagem acima:
Aqui está um vídeo de como ficou

Se tudo parecer bom, refatorarei o código e enviarei/criarei um PR.

8 curtidas

Obrigado por explicar os detalhes extras! Acho que está bom!

6 curtidas

Obrigado; já enviei um PR FEATURE: add image delete button in preview. by ghassanmas · Pull Request #17624 · discourse/discourse · GitHub

7 curtidas

Isso foi mesclado a partir de hoje

6 curtidas