@1doc/1ds-react 2.9.0 → 2.10.0

package/src/utils/html-seguro.ts

@@ -5,14 +5,20 @@
  * fora (um valor guardado, um texto colado) pode trazer `<img onerror>`,
  * `<a href="javascript:...">`, `<script>`, `style` e classes de outro site. Este
  * módulo reduz o HTML ao que o editor sabe escrever: negrito, itálico,
- * sublinhado, tachado, listas, parágrafos, quebras, títulos, citação e link.
+ * sublinhado, tachado, listas, parágrafos, quebras, títulos, citação, link,
+ * estilo de texto por token (`color`, `font-size`, `font-family` em `<span>`),
+ * alinhamento de bloco (`text-align`), imagem (`http(s)`, caminho ou `data:image`
+ * em PNG, JPEG, GIF e WebP) e tabela simples.
  *
  * Roda no navegador (precisa de DOM). Dentro de um `<template>` o HTML é inerte:
  * nada executa e nenhuma imagem carrega enquanto se higieniza. Sem DOM
  * (servidor), devolve o texto escapado.
  */
 
-const PERMITIDAS = ["A", "B", "STRONG", "I", "EM", "U", "S", "STRIKE", "DEL", "UL", "OL", "LI", "P", "BR", "DIV", "SPAN", "H1", "H2", "H3", "H4", "BLOCKQUOTE"];
+const PERMITIDAS = ["A", "B", "STRONG", "I", "EM", "U", "S", "STRIKE", "DEL", "UL", "OL", "LI", "P", "BR", "DIV", "SPAN", "H1", "H2", "H3", "H4", "BLOCKQUOTE", "IMG", "TABLE", "THEAD", "TBODY", "TR", "TH", "TD"];
+/** Blocos que aceitam `text-align`. */
+const ALINHAVEIS = ["P", "DIV", "H1", "H2", "H3", "H4", "LI", "BLOCKQUOTE", "TH", "TD"];
+const ALINHAMENTOS = ["left", "center", "right", "justify"];
 const DESCARTADAS = ["SCRIPT", "STYLE", "IFRAME", "OBJECT", "EMBED", "LINK", "META", "TEMPLATE", "NOSCRIPT", "SVG", "MATH", "FORM", "INPUT", "BUTTON", "TEXTAREA", "SELECT"];
 const escapar = (texto: string): string => texto.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 
@@ -41,6 +47,66 @@ export const normalizarEndereco = (bruto: string): string => {
   if (/^[a-z][a-z0-9+.-]*:/i.test(semControle)) return "";
   return "https://" + texto;
 };
+
+/** Cor, tamanho e família de fonte só valem como TOKEN do DS: `var(--umds-...)`. Cor em hex, rgb ou nome sai. */
+const COR_TOKEN = /^var\(--umds-(?:primitive|semantic)-[a-z0-9-]+\)$/;
+const TAMANHO_TOKEN = /^var\(--umds-primitive-font-size-[a-z0-9]+\)$/;
+const FAMILIA_TOKEN = /^var\(--umds-(?:primitive|semantic)-font-family-(?:base|mono)\)$/;
+
+/**
+ * Declaração de estilo de texto que o editor aceita: `color`, `font-size` e `font-family`,
+ * cada uma só com um token do DS. Devolve a declaração limpa ("color: var(--x);") ou "".
+ */
+export const estiloDeTexto = (propriedade: string, valor: string): string => {
+  const prop = String(propriedade || "").trim().toLowerCase();
+  const val = String(valor || "").trim();
+  if (prop === "color" && COR_TOKEN.test(val)) return "color: " + val + ";";
+  if (prop === "font-size" && TAMANHO_TOKEN.test(val)) return "font-size: " + val + ";";
+  if (prop === "font-family" && FAMILIA_TOKEN.test(val)) return "font-family: " + val + ";";
+  return "";
+};
+
+/** As declarações válidas de um atributo `style` (só color, font-size e font-family por token). */
+const estiloDoSpan = (estilo: string): string => {
+  const partes = String(estilo || "").split(";");
+  let saida = "";
+  for (let i = 0; i < partes.length; i++) {
+    const corte = partes[i].indexOf(":");
+    if (corte === -1) continue;
+    const decl = estiloDeTexto(partes[i].slice(0, corte), partes[i].slice(corte + 1));
+    if (decl) saida += (saida ? " " : "") + decl;
+  }
+  return saida;
+};
+
+/**
+ * Endereço de imagem que o editor aceita: `http(s)`, caminho (`/x`, `./x`, `../x`) ou
+ * `data:image` em base64 de PNG, JPEG, GIF ou WebP (SVG fica de fora: carrega script).
+ * Devolve o endereço limpo, ou "" se for perigoso ou vazio.
+ */
+export const imagemSegura = (bruto: string): string => {
+  const texto = (bruto || "").trim();
+  if (!texto) return "";
+  const semControle = texto.replace(/[\u0000-\u001f\u007f\s]+/g, "");
+  if (/^data:image\/(png|jpe?g|gif|webp);base64,[a-z0-9+/]+=*$/i.test(semControle)) return semControle;
+  // `//host/x` (sem esquema) carregaria de outro site sem o autor ter pedido: fica de fora.
+  if (/^(https?:\/\/|\/(?!\/)|\.\.?\/)/i.test(semControle)) return texto;
+  return "";
+};
+
+/** O `text-align` de um elemento, pelo `style` ou pelo atributo `align`: left, center, right, justify ou "". */
+const alinhamentoDe = (elemento: any): string => {
+  const estilo = String(elemento.getAttribute("style") || "");
+  const achado = /(?:^|;)\s*text-align\s*:\s*([a-z]+)\s*(?:;|$)/i.exec(estilo);
+  const valor = (achado ? achado[1] : String(elemento.getAttribute("align") || "")).toLowerCase();
+  return ALINHAMENTOS.indexOf(valor) !== -1 ? valor : "";
+};
+
+/** Número inteiro de 2 a 99 em `colspan`/`rowspan`; o resto some. */
+const vao = (valor: any): string => {
+  const n = parseInt(String(valor || ""), 10);
+  return n >= 2 && n <= 99 ? String(n) : "";
+};
 const limparNo = (no: any, saida: any, documento: any): void => {
   const filhos = Array.prototype.slice.call(no.childNodes);
   for (let i = 0; i < filhos.length; i++) {
@@ -57,7 +123,31 @@ const limparNo = (no: any, saida: any, documento: any): void => {
       limparNo(filho, saida, documento);
       continue;
     }
+    if (tag === "IMG") {
+      // Imagem sem endereço seguro some inteira (não deixa um <img> quebrado nem carregando de fora).
+      const origem = imagemSegura(filho.getAttribute("src") || "");
+      if (!origem) continue;
+      const imagem = documento.createElement("img");
+      imagem.setAttribute("src", origem);
+      imagem.setAttribute("alt", String(filho.getAttribute("alt") || ""));
+      saida.appendChild(imagem);
+      continue;
+    }
     const novo = documento.createElement(tag.toLowerCase());
+    if (ALINHAVEIS.indexOf(tag) !== -1) {
+      const alinhamento = alinhamentoDe(filho);
+      if (alinhamento) novo.setAttribute("style", "text-align: " + alinhamento + ";");
+    }
+    if (tag === "SPAN") {
+      const estiloValido = estiloDoSpan(filho.getAttribute("style") || "");
+      if (estiloValido) novo.setAttribute("style", estiloValido);
+    }
+    if (tag === "TD" || tag === "TH") {
+      const colunas = vao(filho.getAttribute("colspan"));
+      const linhas = vao(filho.getAttribute("rowspan"));
+      if (colunas) novo.setAttribute("colspan", colunas);
+      if (linhas) novo.setAttribute("rowspan", linhas);
+    }
     if (tag === "A") {
       const href = enderecoSeguro(filho.getAttribute("href") || "");
       if (href) {
@@ -81,8 +171,21 @@ export const sanitizarHtml = (html: string): string => {
   return saida.innerHTML;
 };
 
+/** A tabela vazia que o editor insere: `linhas` × `colunas` células com uma quebra, para o cursor entrar. */
+export const htmlDaTabela = (linhas: number, colunas: number): string => {
+  let celulas = "";
+  for (let c = 0; c < colunas; c++) celulas += "<td><br></td>";
+  let corpo = "";
+  for (let l = 0; l < linhas; l++) corpo += "<tr>" + celulas + "</tr>";
+  return "<table><tbody>" + corpo + "</tbody></table><p><br></p>";
+};
+
+/** O `<img>` que o editor insere (endereço já seguro). */
+export const htmlDaImagem = (endereco: string, alt: string): string => '<img src="' + escapar(endereco) + '" alt="' + escapar(alt || "") + '">';
+
 /** O editor está "vazio": sem texto, sem lista e sem quebra solta (o `<br>` que o navegador deixa). */
 export const htmlVazio = (html: string): boolean => {
+  if (/<(img|table)[\s>]/i.test(html || "")) return false;
   const texto = (html || "").replace(/<br\s*\/?>/gi, "").replace(/<\/?(div|p|span)[^>]*>/gi, "").trim();
   return texto === "";
 };

package/src/utils/toast.ts

@@ -22,7 +22,13 @@ export interface ToastOptions {
   description?: string;
   /** Variante semântica @default 'info' */
   variant?: ToastVariant;
-  /** Auto-dismiss em ms; 0 = não fecha sozinho @default 5000 */
+  /** Linhas de detalhe abaixo da descrição */
+  details?: string[];
+  /** Rótulo do botão de ação ("Desfazer"); só aparece com `onAction` */
+  actionLabel?: string;
+  /** Chamado ao acionar o botão de ação; depois dele o toast fecha */
+  onAction?: (event?: any) => void;
+  /** Auto-dismiss em ms; 0 = não fecha sozinho @default 5000 (0 quando há ação: dá tempo de agir, WCAG 2.2.1) */
   duration?: number;
   /** Exibe o botão de fechar @default true */
   closable?: boolean;
@@ -31,6 +37,9 @@ export interface ToastData {
   id: number;
   message: string;
   description?: string;
+  details?: string[];
+  actionLabel?: string;
+  onAction?: (event?: any) => void;
   variant: ToastVariant;
   duration: number;
   closable: boolean;
@@ -50,7 +59,8 @@ export const toast = (options: ToastOptions): number => {
   const id = sequence;
   items = [...items, {
     variant: "info",
-    duration: 5000,
+    // Toast com ação não some antes de dar tempo de agir.
+    duration: options.actionLabel && options.onAction ? 0 : 5000,
     closable: true,
     ...options,
     id