¡Prueba nuestro nuevo compositor!

Hemos estado trabajando en un nuevo modo de editor de texto enriquecido para nuestro compositor para que sea más fácil escribir en Discourse. ¡Ahora estamos listos para comenzar a probarlo y obtener más comentarios de nuestra comunidad sobre esta función!

Nuestra implementación se basa en el excelente ProseMirror y su módulo Markdown no central, utilizando el esquema, el análisis y las definiciones de serialización del módulo como base para funciones adicionales específicas de Discourse.

Este tema servirá tanto como una guía para probar el nuevo compositor como un centro para rastrear comentarios. ¡Gracias de antemano por toda su ayuda! :sparkling_heart:

:gear: Usando el nuevo compositor en tu comunidad

Todavía consideramos que el compositor es experimental, pero puedes comenzar a usarlo en tu comunidad habilitando la configuración rich editor:

:writing_hand: Conociendo el nuevo compositor

El nuevo compositor es un editor de texto enriquecido que simplifica la experiencia de escritura, especialmente para usuarios no técnicos que no se sienten cómodos con Markdown. Este editor todavía admite Markdown, pero el formato se renderiza inmediatamente para una experiencia WYSIWYG (“lo que ves es lo que obtienes”) que se siente similar a otras herramientas de composición web modernas (como Notion o Google Docs).

Para acceder al nuevo compositor, haz clic en el interruptor en la barra de herramientas. Esto te permitirá cambiar del modo actual solo Markdown al nuevo editor de texto enriquecido. Puedes hacer clic en el interruptor nuevamente para volver, si es necesario.

toggle

Lo que estás probando hoy es la primera versión del nuevo compositor. Todavía no está destinado a ser un reemplazo completo del compositor actual solo con Markdown. Nos hemos centrado primero en lo básico, lo que debería cubrir las necesidades de la mayoría de los usuarios.

Por favor, revisa las secciones a continuación para comprender qué es posible actualmente y qué aún no está listo en el nuevo compositor. ¡Actualizaremos estas áreas con el tiempo a medida que el soporte se expanda!

:green_circle: Funciones admitidas

Las siguientes funciones son compatibles con el nuevo compositor:

  • Capacidad para agregar título y establecer categorías y etiquetas
  • Editor de panel único cuando está en modo de editor de texto enriquecido (es decir, sin panel de vista previa)
  • Interruptor para cambiar entre los modos de editor solo Markdown y de texto enriquecido
  • Formato básico [1] admitido en Markdown, atajos de teclado e íconos de la barra de herramientas
  • Soporte de emoji
  • Conversión automática de Markdown a texto enriquecido al pegar texto sin formato (por ejemplo, **negrita**negrita)
  • Conversión automática de emoticonos (por ejemplo, :):slight_smile: )
  • Interfaz de imagen para redimensionar, subtitular o agrupar imágenes agregadas
  • Interfaz de enlace para visitar, editar, copiar o eliminar enlaces agregados y cambiar sus títulos
  • Interfaz de creación de tablas
  • Interfaz de creación de encuestas
  • Notas al pie
  • Soporte para menciones y hashtags
  • HTML en línea <html> [2]
  • Reemplazos tipográficos (por ejemplo, ™ , → , ± )
  • Cargas de imágenes
  • Archivos adjuntos
  • Citas de temas y chats
  • Ocultar detalles
  • Spoiler de desenfoque (con limitaciones, consulte la sección Funciones faltantes)
  • Oneboxes
  • Autoconversión de regla horizontal (es decir, escribir --- se convierte en regla horizontal)

:red_circle: Funciones faltantes

Las siguientes funciones que sabemos que faltan actualmente o que aún no son totalmente compatibles en el nuevo compositor:

  • Interfaz de tabla para agregar o eliminar columnas y filas después de crear la tabla
  • Interfaz de encuesta para editar encuestas creadas previamente
  • Soporte de barra de herramientas para agregar encabezados
  • Soporte mejorado de Spoiler de desenfoque para agregar desenfoque a texto existente, admitir desenfoque en línea y facilitar la eliminación del desenfoque.
  • Cualquier otra cosa no mencionada explícitamente en la sección de funciones admitidas (por ejemplo, soporte de diagramas Mermaid)

:mega: Probando y compartiendo tus comentarios

A medida que pruebes, es posible que te encuentres con problemas en los que el compositor no se comporte como esperas. Cuando eso suceda, ¡por favor háznoslo saber! Tus comentarios son un activo invaluable para ayudarnos a mejorar el nuevo compositor para que esté listo para estar disponible en tu comunidad.

¡Por favor, proporciona pasos de reproducción específicos, información sobre tu navegador / dispositivo y cualquier captura de pantalla o grabación relevante! También puedes revisar nuestro rastreador de problemas conocidos a continuación para ver si alguien ya ha informado lo que estás viendo. Mantendremos estas secciones actualizadas a medida que identifiquemos y solucionemos problemas.

Recuerda, siempre puedes volver al modo solo Markdown usando el interruptor si tienes un problema al usar el nuevo compositor.

:bug: Errores

  • En Firefox, parece que no puedes posicionar el cursor delante de una mención cuando esta comienza la publicación (en realidad es posible pero visualmente poco claro)

:art: Problemas de UX

  • Evitar ciertos formatos parciales en los enlaces para evitar estilos inesperados
  • Aplicar renderizado visual / validación esperada a los hashtags de categorías, etiquetas y canales de chat
  • Aplicar renderizado visual / validación esperada a las menciones de usuarios y grupos
  • El cursor se enfoca dentro de la cita (en lugar de en la línea de abajo) al comenzar una publicación con una cita o al copiar / pegar citas

:wrench: Mejoras para desarrolladores

  • Mejorar el análisis de HTML en línea (por ejemplo, para <a>)

  1. Negrita, cursiva, subrayado (sin soporte de barra de herramientas), tachado (solo Markdown a través de ~~), enlaces, citas en bloque, código, casilla de verificación (solo Markdown a través de [ ]; soporte de barra de herramientas próximamente), listas con viñetas, listas numeradas ↩︎

  2. Algunos se convierten al Markdown más cercano (por ejemplo, s, strike, strong, b, em, i, code; u no se admite específicamente porque no se convierte en un subrayado real); otros se permitirán como nodos “html_inline” (por ejemplo, kbd, sup, sub, small, big, del, ins, mark) ↩︎

71 Me gusta

¡Se ve bien!

Hay algunos problemas con las etiquetas de spoiler:

  1. Si resaltas algún texto y eliges “Difuminar spoiler”, reemplaza el texto con “Este texto se difuminará”, perdiendo lo que resaltaste.

  2. Los spoilers en línea no funcionan, los pone en una nueva línea.

  3. No hay forma de desactivar un spoiler nuevamente.

11 Me gusta

Gracias Shaun, he tomado nota en el OP de que tenemos más trabajo que hacer en los spoilers.

9 Me gusta

Ya estaba esperando esta función y es genial que Discourse finalmente haya dado este paso :clap:

Solo 1 cosa por ahora: parece extraño tener un área de texto tan estrecha para escribir nuestras publicaciones.

Obviamente, estaba muy acostumbrado a la vista de lado a lado del editor y la vista previa, pero esto ahora parece… raro. Quizás solo necesite tiempo. Sí, probablemente. :smile:

18 Me gusta

¡ Progreso fantástico! :heart:

Lo segundo que noté es que el estilo actual no se activa (y desactiva) visualmente en la barra de herramientas, aunque permanece en vigor. Sería realmente agradable si el estilo actual se resaltara hasta que se desactivara.

¡Eso es todo por ahora!

(Basando mis comentarios en el tema gris ámbar)

15 Me gusta

Estas son buenas observaciones: ahora mismo, nos hemos centrado principalmente en el editor en sí (donde realmente escribes), pero tenemos mejoras planificadas para el contenedor del compositor y la barra de herramientas que deberían abordar estos problemas.

10 Me gusta

Un defecto un poco extraño, pero cuando el compositor está abierto, esto es lo que sucede con el indicador de respuesta.

Probaré completamente cuando esté en el escritorio más tarde, pero parece prometedor.

4 Me gusta

¡Finalmente aquí! :heart_eyes: Se ha desplegado mucho trabajo; ¡trabajo fantástico! Eso será una ventaja significativa para los usuarios que se sientan incómodos con Markdown.

Problema de carga crítico:

Si estás cargando una imagen y cambias a markdown, el markdown de carga no está aquí y genera un error:
image

A la inversa, si cargas desde markdown y luego cambias al nuevo editor, no hay error, pero la imagen no aparece.

12 Me gusta

Me pregunto si deberíamos simplemente bloquear el cambio hasta que se complete la carga… potencialmente podemos convertir marcadores de posición entre editores, pero no parece tan útil.

11 Me gusta

Sí, mis pensamientos son los mismos. ¡Bloquear parece una buena idea!
Cuando subo una imagen grande con una conexión lenta, no pude evitar probar el interruptor hasta que se completó. :cara_sonriente_con_ojos_sonrientes:

11 Me gusta

El nuevo diseño se ve genial. Me encanta cómo Discourse itera con el tiempo, prueba nuevas ideas e involucra a la comunidad.

Algunas observaciones subjetivas, si buscas comentarios:

  • El botón de alineación (izquierda/derecha) es un icono poco convencional y una función que parece muy específica. Dado que los iconos se ajustan en dos líneas en el móvil, simplemente eliminaría esta función. Del mismo modo, la función “insertar fecha” es avanzada/específica y podría ocultarse dentro del menú :gear:. De esa manera, los iconos restantes cabrían todos en una sola línea.
  • La función de carga de video me resultó confusa, incluso como usuaria técnica. ¿Qué pondría en el cuadro “fuente de video”? Además, los botones se ven visualmente un poco desordenados (ver abajo).
  • El botón “M” (cambiar entre texto sin formato y vista previa) no revela su propósito hasta que haces clic en él. Hay un poco de espacio libre en la parte inferior del editor entre los botones :wastebasket: y GIF, y creo que un botón de vista previa tendría más sentido aquí. Y tendrías espacio para la palabra “vista previa”.

8 Me gusta

Estas son funciones que hemos habilitado en meta en algún momento, probablemente para un experimento. No están disponibles por defecto y podríamos desactivarlas o esconderlas detrás del :gear:

Estoy de acuerdo con esto. No estoy seguro de por qué siempre incluimos esto de forma tan prominente en el menú. Yo mismo lo uso todo el tiempo, ¡pero también uso con frecuencia muchas funciones detrás del menú :gear:!

De acuerdo en que al menos el texto de ayuda al pasar el ratón ayudaría a descubrirlo aquí.

En el futuro, sospecho que querremos que el nuevo editor sea el predeterminado y que el cambio a markdown sea el movimiento de poder, que los usuarios avanzados conocerán o podrán descubrir.

9 Me gusta

:megaphone: Estos elementos del menú no están realmente relacionados con el nuevo editor, por lo que no necesitamos centrarnos en ellos aquí. Si alguien tiene más comentarios sobre los elementos del menú, inicie nuevos temas en Feature o realice una búsqueda.

Dicho esto:

  • Eliminé el botón “Insertar video” aquí en meta, que se proporciona a través del componente temático Insert Video.

  • El botón “Cambiar dirección” depende de la configuración del sitio support mixed text direction que mantendremos habilitada en meta porque actualmente estamos probando activamente la funcionalidad multilingüe.

  • En meta también tenemos GIF y Ask AI a los que queremos permitir un acceso destacado.

6 Me gusta

¡Felicidades equipo! Noté una discrepancia en torno a la vista previa de enlaces. Pegar una URL desde el navegador genera una vista previa, pero escribirla no. Hasta que vuelves a ver la vista previa de markdown, lo que la activa para que se genere.

Prueba: Pegado desde la barra del navegador aquí: https://google.com/ Escribiendo aquí: https://google.com

6 Me gusta

Al presionar Enter en el nuevo editor WYSIWYG se crea un salto de línea doble (un salto de párrafo). No me gusta (aunque supongo que es subjetivo), pero especialmente no me gusta para listas con viñetas/numeradas, donde hay mucho espacio entre los elementos de la lista.

  • este
  • es
  • demasiado
  • espacio
13 Me gusta

Puedes presionar \u003ckbd\u003emayús\u003c/kbd\u003e + \u003ckbd\u003eenter\u003c/kbd\u003e para evitar el doble salto de línea, aunque no funciona para listas.
Estoy de acuerdo en que este cambio de comportamiento no debería ser el predeterminado.

7 Me gusta

¡Gran trabajo, este es un paso en la dirección correcta! Sin embargo, todavía tengo algunos problemas básicos de UX que desearía que se hubieran resuelto, pero entraré en eso más tarde.

Lo bueno:
Me encanta el nuevo modo de editor único, es realmente genial y las imágenes en línea en el compositor funcionan muy bien.
Aunque esto es una vista previa, todavía funciona como esperaba, personalmente no he notado nada que falte (aparte de --- que uso mucho).

Lo malo:
Que los botones estén por todas partes aquí es confuso, debería haber un solo lugar para todos ellos. Reemplaza el ícono de doble flecha hacia abajo con una X. Además, en lugar de <<, ¿posiblemente podría ser arrastrable en el eje Y para que podamos controlar su tamaño en lugar de solo uno o cerrarlo?

Todavía me disgusta mucho la fila de íconos en la parte superior y el menú de engranaje “más”, está desordenado y es confuso de usar. Recuerdo que hubo un tema al respecto hasta cierto punto, pero no puedo encontrarlo.

En mi computadora de trabajo (Windows Firefox) el botón de markdown está desalineado.
image

Sigue siendo genial, solo desearía que esto se arreglara :+1:

Añadido a nuestra sección :art: Problemas de UX en el OP para solucionarlo.

Esta es una característica faltante conocida y algo que pretendemos añadir soporte para:

Estamos planeando mejoras para el contenedor y la barra de herramientas del editor, pero en este momento los cambios se limitan al editor en sí. Sin embargo, podemos tener esto en cuenta para esos cambios futuros.

No puedo decir por esta descripción o captura de pantalla qué salió mal exactamente: ¿podrías compartir algunos detalles más para que pueda echar un vistazo?

5 Me gusta

Puede ser solo visual, pero al menos a mí me parece que está un poco demasiado arriba.

1 me gusta