Citas de llamamientos

Personalización Componente temático
50

Aquí tienes una actualización que moderniza el componente y añade compatibilidad con el editor de texto enriquecido. :rocket:
Puede que necesite algunos ajustes o que existan casos límite imprevistos, pero creo que es un buen comienzo. :folded_hands:

En resumen

  • Añade compatibilidad con el editor de texto enriquecido (ver más abajo para una descripción general detallada)
  • Convierte la representación a un componente glimmer
  • Corrige el color CSS con avisos anidados
  • Corrige el color CSS con alias
  • La animación de plegado debería ser más fluida
  • Añade la configuración callout_transition_duration_ms (animación de plegado)
  • Añade el atajo Ctrl + q para insertar un aviso predeterminado. Funciona en ambos editores, y el atajo se añade al modal de Atajos de teclado.
Imágenes 
![chrome_7HSSbReBtO|329x348](upload://x44lZiReC0DwVX61nmYnEJ8l56F.jpeg)
![chrome_YaDrphqvbV|690x266](upload://eaYci4Tmy03XmjjGSt5UwCrIgzY.jpeg)
  • Chat: Añade un botón en la barra de herramientas para insertar un aviso predeterminado
Imágenes 
![chrome_CWig42tWHY|433x500](upload://gXfyvjhr6otlpueP2W2liyJYeKO.jpeg)
![chrome_TsyfsoA82R|291x373](upload://4Vm40cOz91iQbXbfludlYqySiii.jpeg)
![chrome_nWk7hUyRGr|445x181](upload://rWKCT35AfRkzY5vQtiOUwXaJ2Dp.jpeg)
  • Vista previa de Markdown: Añade la capacidad de cambiar el tipo haciendo clic en el icono
Imagen

chrome_atmmLf0v3c
chrome_atmmLf0v3c1522×462 41.3 KB

Editor de texto enriquecido

¡Hablemos del editor de texto enriquecido y qué esperar!

Creación de avisos:

Tienes cuatro formas de insertar avisos:

  • Atajo de teclado
  • Barra de herramientas
  • Reglas de entrada
    • /callout<:tipo>
    • !!<tipo>
  • Soporte para pegar
Vídeo 
![callout_creation|video](upload://tboRaXHnoh4SWetahIvIe11Wd0O.mp4)

Edición de avisos

Los controles para editar un aviso solo aparecen cuando lo has seleccionado previamente.

  • Selector de tipo
    Al hacer clic en el icono, aparecerá un menú flotante.
  • Título personalizado
    Soporta formato en línea y emojis
  • Plegado
    Establece los avisos como colapsables. Se puede acceder a ellos desde el menú de opciones.
    Vídeo

Organización de avisos

  • Controles de movimiento

    • Escritorio
      Hay un control que agarras para arrastrar y soltar el aviso.
    • Dispositivo táctil
      Mueves los avisos hacia arriba/abajo o los anidas en avisos adyacentes. Está deshabilitado por defecto para evitar la sobrecarga en la vista, ya que no es algo que vayas a hacer a menudo. Puedes activarlo/desactivarlo en las opciones.
    Vídeo

  • Navegación por teclado
    Esto ayuda a facilitar el movimiento dentro y fuera de los avisos anidados. Podría requerir algunos ajustes futuros para que el comportamiento sea consistente en esta versión.

    • ← Al comienzo del título, el selector de avisos se abrirá automáticamente.
    • ↑ ↓ Dentro del cuerpo de un aviso sin párrafo donde aterrizar, creará uno; si sales con contenido vacío, el párrafo se eliminará.
    • Enter Dentro del título mueve el cursor al cuerpo (y crea uno si es necesario).
    Vídeo

  • Clic para insertar

    • En áreas donde no hay un párrafo, puedes hacer clic dentro para abrir un párrafo.
    • Si lo prefieres, también puedes usar botones para abrir un párrafo dentro o fuera de un aviso.
      Vídeo

Posiblemente, más adelante, investigue:

  • autocompletado de reglas de entrada
  • mejorar el color usando CSS moderno, para asegurar la consistencia y visibilidad, especialmente en modo oscuro.

  • Deseo eliminar toda la configuración y centrarme primero en la simplicidad, con personalización avanzada solo con CSS, ¡pero ya es muy tarde para eso! :rofl:

Agradecimientos especiales a Moin por darme su opinión.

Eso es todo. Hacedme saber qué pensáis. ¡Los comentarios son muy bienvenidos!

7 Me gusta