Botón para eliminar imagen en la vista previa del editor

Hola,

Estoy pensando en una nueva función para eliminar fácilmente imágenes del editor. Muchas veces sucede que el usuario sube varias imágenes y solo quiere eliminar una, pero es realmente complicado si el usuario no está familiarizado con markdown. Por supuesto, lo intentan, pero el resultado suelen ser enlaces rotos, etc.

Hubo una modificación con el texto alternativo de la imagen que funciona bastante bien y es fácil de usar. Añade la capacidad de editar el texto alternativo en el lado de la vista previa.


Sería genial colocar un botón de eliminar en la imagen en el lado de la vista previa. Quizás un icono de :wastebasket: o una X en la esquina de la imagen y al hacer clic en ese botón podría dirigirse y eliminar el código markdown real de la imagen. :slightly_smiling_face:

Gracias :slightly_smiling_face:

8 Me gusta

Gracias Don, ese parece ser un botón útil y probablemente no sea muy difícil de agregar. Marcaré esto como pr-welcome, me complacerá ver que se agregue.

3 Me gusta

Estoy trabajando en resolver esto; casi tengo una prueba de concepto funcional.
Solo tengo una confusión entre esos dos componentes d-editor.js y composer-editor,js. Mi solución hasta ahora se basa en escuchar el contenido de vista previa/html cuando se actualiza dentro del componente d-editor.js… etc.
¿Voy en la dirección correcta?

1 me gusta

El lugar más apropiado para eliminar una imagen sería junto a los botones que mostramos al pasar el ratón para redimensionar imágenes y añadir texto alternativo en la vista previa del editor.

image

El hook para eliminar el marcado de la imagen debería ser muy similar a los botones de 100%/75%/50%. Puedes ver aquí cómo se realiza el escalado de la imagen.

2 Me gusta

No estoy muy seguro de añadirlo ahí, porque parece muy raro necesitarlo y añadirá ruido visual.

Supongo que un icono de “papelera” alineado a la derecha de esa línea, para que no esté demasiado cerca del botón de editar.

@awesomerobot ¿qué opinas?

Además, me pregunto si el orden de las operaciones aquí es correcto, ¿son rotar y recortar más importantes?

3 Me gusta

Por solo agregar un botón de eliminar podríamos hacer:

Mover el botón de editar a la izquierda (extra: menor distancia del ratón a la entrada del compositor), y luego poner el botón de eliminar a la derecha… así que ahora tenemos cierta distancia entre las acciones inofensivas y las peligrosas.

Otras cosas deseables:

  • hacer el icono de editar azul como el 50%, 75%
  • mantener el texto en negro, pero que también haga clic en la entrada
  • cuando el editor de títulos esté abierto, ¿podemos posicionarlo para que coincida con la línea base del texto de vista previa (así que una capa z por encima)? Esto hace que las cosas se muevan menos al hacer clic:

Este es un alcance mayor, pero con rotar y recortar podríamos querer un tipo de menú completamente diferente?

http://notion.so tiene un buen ejemplo:

Así que tienen su botón con un montón de opciones, escalar es hacer clic y arrastrar en los manejadores…

Un pequeño detalle agradable es que si agregas una imagen que es demasiado pequeña para la superposición del botón, fuerzan la imagen a una escala que contenga el botón una vez que intentas interactuar con ella. Eso evita tener un botón al pasar el ratón que se superponga a cualquier contenido circundante.

7 Me gusta

@awesomerobot Gracias por tus comentarios. Tengo otra pregunta para asegurarme de que estamos en la misma página. Con respecto a este punto:

Dado que hay dos escenarios de cómo aparece el contenedor de “botones de escala” junto con el “botón de edición alternativo”.

Normalmente, estos aparecen en la misma línea; sin embargo, cuando el texto alternativo es largo, el contenedor alternativo se desbordará a la siguiente línea:

Misma línea

Desbordamiento

Ahora, volviendo a tus puntos anteriores; tendría sentido asumiendo que quieres que el comportamiento de desbordamiento sea el predeterminado. De lo contrario, para un texto alternativo corto, el botón de eliminar sería simplemente el botón de cerrar la edición del texto alternativo.

Otra alternativa es simplemente mostrar el contenedor alternativo antes de los botones de escala, por ejemplo:

Misma línea:

Desbordamiento:

Así que está claro que el botón de eliminar viene después del 50%, pero no está claro cómo funcionaría en los dos escenarios anteriores.

2 Me gusta

[Actualización]

Seguí el segundo enfoque anterior:
Aquí hay un video de cómo se ve

Si todo se ve bien; refactorizaré el código y enviaré/crearé una PR.

8 Me gusta

¡Gracias por explicar los detalles adicionales! ¡Creo que esto se ve bien!

6 Me gusta

Gracias; ya he enviado una PR FEATURE: add image delete button in preview. by ghassanmas · Pull Request #17624 · discourse/discourse · GitHub

7 Me gusta

Esto se ha fusionado hoy

6 Me gusta