Passer au contenu principal

MarkdownViewer

Ouvrir dans ChatGPT
Ombre dwc-markdown-viewer 25.11
Java API

Le composant MarkdownViewer rend le texte markdown en HTML. Il prend en charge la syntaxe markdown standard, y compris les en-têtes, les listes, les blocs de code, les liens, les images et le rendu d'emoji. Le composant propose également un rendu progressif, qui affiche le contenu caractère par caractère pour un effet de machine à écrire.

Configuration du contenu​

Créez un MarkdownViewer avec ou sans contenu initial, puis mettez à jour son contenu en utilisant setContent() :

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

// Remplacez complètement le contenu
viewer.setContent("""
    ## Nouveau contenu

    - Éléments 1
    - Éléments 2
    """);

// Obtenez le contenu actuel
String content = viewer.getContent();
conseil

Le composant implémente HasText, donc setText() et getText() fonctionnent comme des alias pour les méthodes de contenu.

Afficher le code

Ajouter du contenu​

La méthode append() ajoute du contenu progressivement sans remplacer ce qui est déjà là :

viewer.append("## Nouvelle section\n\n");
viewer.append("Plus de contenu ici...");

Par défaut, le contenu ajouté apparaît immédiatement. Lorsque le rendu progressif est activé, le contenu ajouté va dans un tampon et s'affiche caractère par caractère à la place.

Défilement automatique​

Activez le défilement automatique pour garder le champ de vision en bas à mesure que le contenu augmente. Cela fonctionne avec n'importe quelle méthode d'ajout de contenu, que ce soit setContent(), append(), ou le rendu progressif. Si un utilisateur fait défiler manuellement vers le haut pour examiner un contenu précédent, le défilement automatique se met en pause et reprend lorsqu'il fait défiler à nouveau vers le bas.

viewer.setAutoScroll(true);

Rendu progressif​

Le rendu progressif affiche le contenu caractère par caractère plutôt que tout d'un coup, créant un effet de machine à écrire. Les interfaces de chat AI utilisent souvent cela pour montrer des réponses apparaissant progressivement :

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

Lorsqu'il est activé, le contenu ajouté via setContent() ou append() va dans un tampon et s'affiche progressivement. Lorsqu'il est désactivé, le contenu apparaît immédiatement.

Afficher le code

Vitesse de rendu​

La méthode setRenderSpeed() contrôle combien de caractères se rendent par image d'animation. Des valeurs plus élevées signifient un rendu plus rapide. À 60 images par seconde, la vitesse par défaut de 4 correspond à environ 240 caractères par seconde :

VitesseCaractères/Seconde
4 (par défaut)~240
6~360
10~600
viewer.setRenderSpeed(6);
Correspondre à votre taux de données

Si votre serveur envoie du contenu plus vite que le visualiseur ne le rend, le tampon grandit et le contenu affiché prend du retard. Augmentez renderSpeed pour garder le rythme, ou appelez flush() lorsque tout le contenu a été reçu pour afficher immédiatement le reste du contenu.

État de rendu​

Lorsque le rendu progressif est activé, la méthode isRendering() retourne true pendant que le composant affiche activement le contenu mis en tampon. Les interfaces de chat utilisent souvent cela pour afficher ou masquer un bouton d'arrêt :

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

Cette méthode retourne toujours false lorsque le rendu progressif est désactivé.

Contrôle du rendu​

Deux méthodes contrôlent la façon dont le rendu progressif s'arrête :

  • stop() arrête le rendu et jette tout contenu mis en tampon qui n'a pas encore été affiché. Appelez cela lorsque l'utilisateur annule.
  • flush() arrête le rendu mais affiche immédiatement tout le contenu mis en tampon restant. Appelez cela lorsque tout le contenu a été reçu et que vous souhaitez le montrer sans attendre.
// L'utilisateur a cliqué sur "Arrêter la génération"
viewer.stop();

// Tout le contenu reçu, montrez tout maintenant
viewer.flush();

Ces méthodes n'ont aucun effet lorsque le rendu progressif est désactivé.

Attendre la fin​

La méthode whenRenderComplete() retourne un PendingResult qui se termine lorsque le rendu progressif a fini d'afficher tout le contenu mis en tampon :

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

Si le rendu progressif n'est pas activé ou qu'aucun contenu n'est en cours de rendu, le PendingResult se termine immédiatement.

Coordination de l'UI

Lors de l'utilisation du rendu progressif, ne réactivez pas les champs de saisie uniquement en fonction du moment où vous avez terminé d'appeler append(). Le moteur pourrait encore afficher du contenu mis en tampon. Attendez whenRenderComplete() afin que tout le contenu apparaisse avant que les utilisateurs puissent interagir à nouveau.

La démo suivante simule une interface de chat AI en utilisant append() avec le rendu progressif activé :

Afficher le code

Effacer le contenu​

Supprimez tout le contenu avec clear() :

viewer.clear();

Si le rendu progressif est actif, clear() arrête également le rendu et complète tout résultat whenRenderComplete() en attente.

Mise en surbrillance de la syntaxe​

Le MarkdownViewer prend en charge la mise en surbrillance de la syntaxe pour les blocs de code lorsque Prism.js est disponible. Intégrez Prism dans votre application avec le regroupement frontal : déclarez le package dans votre classe App et rédigez une entrée qui importe Prism, le plugin autoloader et un thème.

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";

Le plugin autoloader charge les définitions de langue au besoin, donc les blocs de code avec des indices de langue comme ```java ou ```python sont automatiquement mis en surbrillance.

Loading...