Smart chips

Pequenos rótulos arredondados para uma data, uma pessoa ou um link, colocados inline no texto. Cada chip é uma peça única que não pode ser editada letra por letra, e armazena um valor legível por máquina ao lado do texto que as pessoas veem, como 2026-11-11 por trás de "Nov 11, 2026" ou o ID de um usuário por trás de um nome.

Ative o recurso

O recurso é o plugin smartchips.js (também incluído em plugins/all_plugins.js). Ele adiciona dois comandos:

• insertdatechip (dica de ferramenta "Date Chip"): um seletor de data. A barra de ferramentas padrão o traz no menu "More" (⋮).
• insertchip (dica de ferramenta "Smart Chip"): uma caixa de diálogo com as abas Date, Person e Link. Ele não está em nenhuma barra de ferramentas incluída; adicione-o à sua, ou use "Smart chip" no menu de barra.

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

<div id="div_editor1"><p>Review with </p></div>
<script>
var people = [
  { label: "Maria Garcia", value: "user:1042" },
  { label: "Mark Chen", value: "user:2077" },
  { label: "Priya Nair", value: "user:3310" }
];
var editor1 = new RichTextEditor("#div_editor1", {
  toolbar: "custom",
  toolbar_custom: "{bold,italic,underline}|{insertdatechip,insertchip}|{undo,redo}",
  chipResolver: function (query, type) {
    if (type !== "person") return Promise.resolve([]);
    var q = query.toLowerCase();
    return Promise.resolve(people.filter(function (p) { return p.label.toLowerCase().indexOf(q) !== -1; }));
  }
});
</script>

Em um app real, o resolver consultaria o seu diretório de usuários e retornaria as correspondências.

Opções

Opção	Padrão	O que faz
chipResolver	null	function (query, type), em que type é "person" ou "link". Retorne uma Promise de [{ label, value, href }]; até seis são exibidas como sugestões enquanto o autor digita. label é o texto do chip, value é armazenado em data-rte-chip-value, href é o endereço do link nos chips de link.
chipDateFormat	null	function (date) que retorna o texto de um chip de data. Sem ela, o texto é "Nov 11, 2026" em uma página em inglês; com um pacote de idioma que não seja inglês (text_uilocale), é a data abreviada dessa localidade, de Intl.DateTimeFormat.
text_insertdatechip, text_insertchip	"Date Chip", "Smart Chip"	Dicas de ferramenta dos botões.

var editor1 = new RichTextEditor("#div_editor1", {
  chipDateFormat: function (d) {
    return d.toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" });
  }
});

Com isso, o botão Today mostrou "4 November 2026" e inseriu um chip com esse texto; o valor armazenado continuou sendo 2026-11-04.

Como usar

• Chip de data. A caixa de diálogo Date oferece Today, Tomorrow, Yesterday e Next week, cada um mostrando a sua data, e um campo de data para qualquer outro dia. O valor é sempre YYYY-MM-DD no horário local do navegador.
• Chip de pessoa. Digite um nome e pressione Insert, ou clique em uma sugestão. Sem um resolver, o nome digitado é ao mesmo tempo o label e o valor.
• Chip de link. Digite um endereço. Um domínio sem protocolo recebe https://; endereços javascript:, data:, vbscript: e file: são recusados, e o campo pede uma URL http(s) válida. O chip mostra o endereço sem https:// e o abre em uma nova aba.
• Por script: editor1.execCommand("insertdatechip") e editor1.execCommand("insertchip") abrem as caixas de diálogo.

O que você precisa saber

• O plugin tem apenas estes três tipos de chip. Não há chips de arquivo nem de local, e o campo icon que um resolver pode retornar não é usado.
• Um chip fica fixo depois de inserido. Clicar em um chip de data não abre um seletor, e nada atualiza o texto depois (um chip "Today" mantém a data em que foi criado). Para alterar um, exclua-o e insira um novo.
• Marcação salva, a partir da imagem acima (ícones abreviados):

  <span class="rte-chip rte-chip-person" data-rte-chip="person" data-rte-chip-value="user:1042" contenteditable="false" style=""><span class="rte-chip-icon"><svg …>…</svg></span><span class="rte-chip-label">Maria Garcia</span></span>​
  <span class="rte-chip rte-chip-date" data-rte-chip="date" data-rte-chip-value="2026-11-11" contenteditable="false" style="">…<span class="rte-chip-label">Nov 11, 2026</span></span>​
  <a class="rte-chip rte-chip-link" data-rte-chip="link" data-rte-chip-value="https://richtexteditor.com/docs/quick-start" contenteditable="false" href="https://richtexteditor.com/docs/quick-start" target="_blank" rel="noopener noreferrer" style="">…<span class="rte-chip-label">richtexteditor.com/docs/quick-start</span></a>​

  Cada chip é seguido de um espaço de largura zero, para que o cursor possa ficar depois dele. Leia data-rte-chip e data-rte-chip-value no seu servidor para saber quem foi citado ou qual data foi definida.
• As cores dos chips são uma folha de estilo que o plugin adiciona apenas dentro do editor. Adicione regras para .rte-chip, .rte-chip-date, .rte-chip-person e .rte-chip-link na página que exibe o conteúdo.
• Os sanitizadores precisam manter span e a com class e os atributos data-rte-chip*, além dos pequenos ícones svg inline (ou remover o span rte-chip-icon).
• Para @-menções durante a digitação, consulte menções.

Relacionados: demonstração de blocos ricos, cards de bookmark.