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 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.
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.
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?
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.
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.
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:
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.
@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:
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: