Suggestions de texte en ligne

Lorsque l’utilisateur cesse de taper, l’éditeur demande à une fonction que vous fournissez de poursuivre la phrase, puis affiche la suggestion en gris après le curseur. Tab l’accepte ; toute autre saisie la ferme. L’éditeur ne fournit aucun modèle d’IA et n’effectue aucun appel réseau lui-même : votre fonction décide de la provenance du texte.

Activation

Cette fonctionnalité est fournie par le plugin ghostcomplete.js (également inclus dans plugins/all_plugins.js). Il n’a pas de bouton dans la barre d’outils. Il fonctionne uniquement lorsque ghostText est défini et que ghostTextResolver est une fonction.

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/ghostcomplete.js"></script>

<div id="editor"><p>Our support team answers</p></div>
<script>
var editor = new RichTextEditor("#editor", {
    ghostText: true,
    ghostTextResolver: function (ctx) {
        return fetch("/api/complete", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ before: ctx.before })
        })
            .then(function (r) { return r.json(); })
            .then(function (data) { return data.text; });
    }
});
</script>

Ici, /api/complete est votre propre point de terminaison. Il reçoit le texte avant le curseur, interroge le modèle de votre choix (conservez la clé API sur le serveur) et répond { "text": " every ticket within one business day." }. Commencez le texte renvoyé par un espace s’il prolonge un mot, car il est inséré exactement tel quel.

Entrées et résultat du résolveur

ghostTextResolver(ctx) est appelé avec :

• ctx.before : le texte depuis le début du paragraphe courant (ou du titre, de l’élément de liste, de la cellule…) jusqu’au curseur, limité aux maxContext derniers caractères ;
• ctx.after : le texte du curseur à la fin du bloc ;
• ctx.full : le texte du document entier.

Renvoyez une chaîne ou une Promise de chaîne. Une chaîne vide, une autre valeur, une exception ou une Promise rejetée n’affichent rien. Si l’utilisateur reprend la saisie avant la réponse, celle-ci est ignorée. Une suggestion n’est demandée que si ctx.before contient au moins minChars caractères hors espaces et qu’aucun texte n’est sélectionné.

Options

Option	Valeur par défaut	Fonctionnement
ghostText	false	true, ou un objet avec les trois réglages ci-dessous, active la fonctionnalité.
ghostText.delayMs	600	Délai après la dernière saisie avant l’appel du résolveur. Utilisez un nombre positif : 0 est considéré comme non défini et donne 600.
ghostText.minChars	3	Nombre minimal de caractères hors espaces avant le curseur.
ghostText.maxContext	2000	Nombre maximal de caractères transmis dans ctx.before.
ghostTextResolver	null	Votre fonction, décrite ci-dessus.

Touches et API

• Tab accepte la suggestion. Elle est insérée comme du texte saisi : un Ctrl+Z la retire.
• Échap, les flèches, Début, Fin, Page précédente et Page suivante la ferment. Saisir un caractère la ferme et démarre une nouvelle attente.
• Un clic ou un appui sur le texte gris l’accepte (seul moyen sur un téléphone, sans touche Tab). Un clic ailleurs la ferme.

Méthodes : editor.setGhostTextResolver(fn) remplace le résolveur à l’exécution ; editor.requestGhostText() demande immédiatement une suggestion, sans délai ; editor.acceptGhostText(), editor.dismissGhostText() et editor.hasGhostText() font ce que leur nom indique. Avec le plugin de commandes slash, le menu « / » contient « AI complete », qui appelle requestGhostText(). Sans résolveur, cet appel affiche une courte note dans l’éditeur indiquant que la complétion n’est pas configurée.

À savoir

• Pendant son affichage, la suggestion est cet élément après le curseur :

  <span class="rte-ghost" contenteditable="false" data-rte-ghost="1" aria-hidden="true"> every ticket within one business day.</span>

  getHTMLCode(), getHTMLContent() et getJSON() la retirent : le HTML enregistré ne contient donc que le texte accepté. Les lecteurs d’écran l’ignorent (aria-hidden).
• Le nombre de mots et de caractères de la barre inférieure inclut le texte gris lorsqu’il est affiché.
• Chaque pause de saisie entraîne un appel à votre point de terminaison. Limitez le débit et mettez les réponses en cache côté serveur, puis augmentez delayMs si les appels sont payants.
• requestGhostText() nécessite également que ghostText soit défini ; un résolveur seul ne suffit pas.

Voir aussi : AI Toolkit (actions d’IA déclenchées par des commandes), fournisseurs d’IA et streaming, démonstration d’aide à la rédaction.