Saltar al contenido principal

MarkdownViewer

Abrir en ChatGPT
Sombra dwc-markdown-viewer 25.11
Java API

El componente MarkdownViewer renderiza texto markdown como HTML. Soporta la sintaxis markdown estándar incluyendo encabezados, listas, bloques de código, enlaces, imágenes y renderización de emoji. El componente también proporciona renderización progresiva, que muestra el contenido carácter por carácter para crear un efecto de máquina de escribir.

Configuración del contenido​

Crea un MarkdownViewer con o sin contenido inicial, luego actualízalo usando setContent():

MarkdownViewer viewer = new MarkdownViewer("# Hello World");

// Reemplazar contenido completamente
viewer.setContent("""
    ## Nuevo Contenido

    - Elemento 1
    - Elemento 2
    """);

// Obtener contenido actual
String content = viewer.getContent();
sugerencia

El componente implementa HasText, por lo que setText() y getText() funcionan como alias para los métodos de contenido.

Mostrar Código

Agregar contenido​

El método append() agrega contenido de forma incremental sin reemplazar lo que ya está allí:

viewer.append("## Nueva Sección\n\n");
viewer.append("Más contenido aquí...");

Por defecto, el contenido agregado aparece inmediatamente. Cuando se habilita la renderización progresiva, el contenido agregado va a un búfer y se muestra carácter por carácter.

Desplazamiento automático​

Habilita el desplazamiento automático para mantener la vista en la parte inferior a medida que el contenido crece. Esto funciona con cualquier método de adición de contenido, ya sea setContent(), append(), o renderización progresiva. Si un usuario se desplaza manualmente hacia arriba para revisar contenido anterior, el desplazamiento automático se pausa y se reanuda cuando vuelven a desplazarse hacia abajo.

viewer.setAutoScroll(true);

Renderización progresiva​

La renderización progresiva muestra contenido carácter por carácter en lugar de todo de una vez, creando un efecto de máquina de escribir. Las interfaces de chat de IA comúnmente usan esto para mostrar respuestas que aparecen gradualmente:

MarkdownViewer viewer = new MarkdownViewer();
viewer.setProgressiveRender(true);

Cuando está habilitado, el contenido agregado a través de setContent() o append() va a un búfer y se muestra de forma incremental. Cuando está deshabilitado, el contenido aparece inmediatamente.

Mostrar Código

Velocidad de renderizado​

El método setRenderSpeed() controla cuántos caracteres se renderizan por cuadro de animación. Valores más altos significan una renderización más rápida. A 60fps, la velocidad predeterminada de 4 se traduce aproximadamente en 240 caracteres por segundo:

VelocidadCaracteres/Secundo
4 (predeterminado)~240
6~360
10~600
viewer.setRenderSpeed(6);
Sincronizando tu tasa de datos

Si tu servidor envía contenido más rápido de lo que el visor renderiza, el búfer crece y el contenido mostrado se queda atrás. Aumenta renderSpeed para mantener el ritmo, o llama a flush() cuando todo el contenido haya sido recibido para mostrar el contenido restante inmediatamente.

Estado de renderizado​

Cuando la renderización progresiva está habilitada, el método isRendering() devuelve true mientras el componente está mostrando activamente contenido almacenado en búfer. Las interfaces de chat a menudo usan esto para mostrar u ocultar un botón de detener:

if (viewer.isRendering()) {
  stopButton.setVisible(true);
}

Este método siempre devuelve false cuando la renderización progresiva está deshabilitada.

Controlando la renderización​

Dos métodos controlan cómo se detiene la renderización progresiva:

  • stop() detiene la renderización y descarta cualquier contenido en búfer que aún no se haya mostrado. Llame a esto cuando el usuario cancele.
  • flush() detiene la renderización pero muestra inmediatamente todo el contenido restante en búfer. Llame a esto cuando todo el contenido haya sido recibido y desee mostrarlo sin esperar.
// El usuario hizo clic en "Detener generación"
viewer.stop();

// Todo el contenido recibido, mostrar todo ahora
viewer.flush();

Estos métodos no tienen efecto cuando la renderización progresiva está deshabilitada.

Esperando a la finalización​

El método whenRenderComplete() devuelve un PendingResult que se completa cuando la renderización progresiva termina de mostrar todo el contenido en búfer:

viewer.whenRenderComplete().thenAccept(v -> {
  inputField.setEnabled(true);
  inputField.focus();
});

Si la renderización progresiva no está habilitada o no se está renderizando contenido, el PendingResult se completa inmediatamente.

Coordinación de la UI

Cuando uses renderización progresiva, no re-habilites los campos de entrada basándote solo en cuando termines de llamar a append(). El renderizador puede seguir mostrando contenido almacenado en búfer. Espera a whenRenderComplete() para que todo el contenido aparezca antes de que los usuarios puedan interactuar nuevamente.

La siguiente demo simula una interfaz de chat de IA utilizando append() con renderización progresiva habilitada:

Mostrar Código

Limpiando el contenido​

Elimina todo el contenido con clear():

viewer.clear();

Si la renderización progresiva está activa, clear() también detiene la renderización y completa cualquier resultado pendiente de whenRenderComplete().

Resaltado de sintaxis​

El MarkdownViewer soporta resaltado de sintaxis para bloques de código cuando Prism.js está disponible. Lleva Prism a tu aplicación con el agregador de frontend: declara el paquete en tu clase App y autoriza una entrada que importe Prism, el complemento de autoload y un tema.

Application.java
@BundlePackage(value = "prismjs", version = "^1.29.0")
@BundleEntry("prism/entry.ts")
public class Application extends App {
  // ...
}
src/main/frontend/prism/entry.ts
import "prismjs";
import "prismjs/plugins/autoloader/prism-autoloader";
import "prismjs/themes/prism-tomorrow.min.css";

El complemento de autoload carga definiciones de lenguajes según sea necesario, por lo que los bloques de código con sugerencias de lenguaje como ```java o ```python se resaltan automáticamente.

Loading...