Preenchimento inline com texto fantasma

Quando o usuário para de digitar, o editor pede a uma função fornecida por você uma continuação da frase e a mostra em cinza depois do cursor. Tab aceita; qualquer outra coisa descarta. O editor não inclui nenhum modelo de IA e não faz chamadas de rede por conta própria: a sua função decide de onde vem o texto.

Ative o recurso

O recurso é o plugin ghostcomplete.js (também incluído em plugins/all_plugins.js). Ele não tem botão na barra de ferramentas. Só funciona quando ghostText está definido e ghostTextResolver é uma função.

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

Aqui, /api/complete é o seu próprio endpoint. Ele recebe o texto antes do cursor, consulta o modelo que você usar (mantenha a chave da API no servidor) e responde { "text": " every ticket within one business day." }. Comece o texto retornado com um espaço quando ele continuar depois de uma palavra, porque ele é inserido exatamente como foi retornado.

O que o resolver recebe e retorna

ghostTextResolver(ctx) é chamado com:

• ctx.before: o texto desde o início do parágrafo atual (ou título, item de lista, célula…) até o cursor, cortado para os últimos maxContext caracteres;
• ctx.after: o texto do cursor até o fim desse bloco;
• ctx.full: o texto do documento inteiro.

Retorne uma string ou uma Promise de uma string. Uma string vazia, algo que não seja string, um erro lançado ou uma Promise rejeitada não mostram nada. Se o usuário digitar de novo antes de a resposta chegar, a resposta atrasada é descartada. Uma sugestão só é pedida quando ctx.before tem pelo menos minChars caracteres que não são espaço e nada está selecionado.

Opções

Opção	Padrão	O que faz
ghostText	false	true, ou um objeto com as três configurações abaixo, ativa o recurso.
ghostText.delayMs	600	Pausa depois da última entrada antes de o resolver ser chamado. Use um número positivo: 0 conta como não definido e resulta em 600.
ghostText.minChars	3	Mínimo de caracteres que não são espaço antes do cursor.
ghostText.maxContext	2000	Máximo de caracteres passados em ctx.before.
ghostTextResolver	null	A sua função, como descrito acima.

Teclas e API

• Tab aceita a sugestão. Ela é inserida como texto digitado, então um Ctrl+Z a remove de novo.
• Escape, as teclas de seta, Home, End, PageUp e PageDown a descartam. Digitar qualquer caractere a descarta e começa uma nova espera.
• Clicar ou tocar no texto cinza o aceita (a única forma em um celular, que não tem tecla Tab). Clicar em qualquer outro lugar o descarta.

Métodos: editor.setGhostTextResolver(fn) substitui o resolver em tempo de execução; editor.requestGhostText() pede uma sugestão agora, sem a espera; editor.acceptGhostText(), editor.dismissGhostText() e editor.hasGhostText() fazem o que os nomes dizem. Com o plugin de comandos de barra carregado, o menu "/" tem uma entrada "AI complete" que chama requestGhostText(). Se nenhum resolver estiver definido, essa chamada mostra no editor um aviso curto dizendo que o preenchimento não está configurado.

O que você precisa saber

• Enquanto está visível, a sugestão é este elemento depois do cursor:

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

  getHTMLCode(), getHTMLContent() e getJSON() o removem, então o HTML salvo só contém o texto que o usuário aceitou. Os leitores de tela o ignoram (aria-hidden).
• A contagem de palavras e caracteres na barra inferior inclui o texto cinza enquanto ele está visível.
• Cada pausa na digitação é uma chamada ao seu endpoint. Limite a taxa e use cache no servidor, e aumente delayMs se as chamadas custarem dinheiro.
• requestGhostText() também precisa que ghostText esteja definido; só com um resolver, ele não faz nada.

Relacionados: AI Toolkit (ações de IA acionadas por comandos), provedores de IA e streaming, demonstração de assistência à escrita.