@1doc/1ds-react 2.8.0 → 2.10.0

package/dist/teste/RichTextEditor.test.js

@@ -0,0 +1,287 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useState } from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import RichTextEditor from "../components/RichTextEditor/RichTextEditor";
+import { enderecoSeguro, normalizarEndereco, sanitizarHtml } from "../utils/html-seguro";
+/** jsdom não traz `execCommand`: o teste fala com um espião e confere o que o editor pede ao navegador. */
+let execCommand;
+let estados;
+beforeEach(() => {
+    estados = {};
+    execCommand = vi.fn(() => true);
+    document.execCommand = execCommand;
+    document.queryCommandState = (comando) => !!estados[comando];
+});
+const area = () => screen.getByRole("textbox");
+/** Escreve na área como o navegador faz: muda o conteúdo e dispara `input`. */
+const escrever = (html) => {
+    area().innerHTML = html;
+    fireEvent.input(area());
+};
+const selecionarTudoNaArea = () => {
+    const selecao = window.getSelection();
+    const faixa = document.createRange();
+    faixa.selectNodeContents(area());
+    selecao.removeAllRanges();
+    selecao.addRange(faixa);
+};
+describe("RichTextEditor: estrutura e nomes", () => {
+    it("a barra é um toolbar nomeado com as ferramentas padrão", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "Despacho" }));
+        const barra = screen.getByRole("toolbar", { name: "Formatação" });
+        for (const nome of ["Negrito", "Itálico", "Sublinhado", "Lista com marcadores", "Lista numerada", "Link", "Desfazer", "Refazer"]) {
+            expect(screen.getByRole("button", { name: nome })).toBeInTheDocument();
+        }
+        expect(barra.querySelectorAll('[role="separator"]')).toHaveLength(3);
+        expect(screen.queryByRole("button", { name: "Tachado" })).toBeNull();
+    });
+    it("a área de escrita é um textbox multilinha com nome e placeholder", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "Despacho", placeholder: "Escreva o despacho..." }));
+        const caixa = screen.getByRole("textbox", { name: "Despacho" });
+        expect(caixa).toHaveAttribute("aria-multiline", "true");
+        expect(caixa).toHaveAttribute("contenteditable", "true");
+        expect(caixa).toHaveAttribute("data-placeholder", "Escreva o despacho...");
+    });
+    it("label visível nomeia a área", () => {
+        render(_jsx(RichTextEditor, { label: "Descri\u00E7\u00E3o", id: "rte" }));
+        expect(screen.getByRole("textbox", { name: "Descrição" })).toBeInTheDocument();
+    });
+    it("toolbar escolhe as ferramentas e os separadores", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "x", toolbar: ["bold", "|", "strike", "clear"] }));
+        expect(screen.getAllByRole("button").map((b) => b.getAttribute("aria-label"))).toEqual(["Negrito", "Tachado", "Limpar formatação"]);
+        expect(screen.getByRole("toolbar").querySelectorAll('[role="separator"]')).toHaveLength(1);
+    });
+    it("labels e toolbarLabel traduzem a barra", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "x", toolbarLabel: "Formatting", toolbar: ["bold", "link"], labels: { bold: "Bold", link: "Link (Ctrl+K)" } }));
+        expect(screen.getByRole("toolbar", { name: "Formatting" })).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Bold" })).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Link (Ctrl+K)" })).toBeInTheDocument();
+    });
+    it("errorMessage e helperText ligam a área por aria-describedby", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "x", id: "r", errorMessage: "Escreva o despacho", helperText: "Obrigat\u00F3rio" }));
+        expect(area()).toHaveAttribute("aria-invalid", "true");
+        expect(area().getAttribute("aria-describedby")).toBe("r-error r-helper");
+        expect(screen.getByText("Escreva o despacho")).toBeInTheDocument();
+    });
+    it("minHeight e resizable", () => {
+        const { container } = render(_jsx(RichTextEditor, { ariaLabel: "x", minHeight: 200, resizable: true }));
+        expect(area().style.minHeight).toBe("200px");
+        expect(container.querySelector(".umds-rte--resizable")).not.toBeNull();
+    });
+    it("o slot footer aparece dentro da moldura", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "x", footer: _jsx("span", { "data-testid": "assinatura", children: "Ana Paula Souza" }) }));
+        expect(screen.getByTestId("assinatura").closest(".umds-rte__footer")).not.toBeNull();
+    });
+});
+describe("RichTextEditor: valor e higienização", () => {
+    it("defaultValue entra na área", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "x", defaultValue: "<p>Ol\u00E1 <b>mundo</b></p>" }));
+        expect(area().innerHTML).toBe("<p>Olá <b>mundo</b></p>");
+    });
+    it("o HTML que entra é higienizado: sem script, onerror, style nem javascript:", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "x", defaultValue: '<p style="color:red" class="x" onclick="a()">ok</p><script>alert(1)</script><img src=x onerror="alert(1)"><a href="javascript:alert(1)">mau</a><a href="https://1doc.com.br">bom</a>' }));
+        const html = area().innerHTML;
+        expect(html).not.toMatch(/script|onerror|onclick|style=|class=|javascript:|<img/i);
+        expect(html).toContain('<a href="https://1doc.com.br" rel="noopener noreferrer">bom</a>');
+        expect(html).toContain("<p>ok</p>");
+        expect(html).toContain("mau");
+    });
+    it("digitar entrega o HTML em onChange; apagar tudo entrega vazio", () => {
+        const aoMudar = vi.fn();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", onChange: aoMudar }));
+        escrever("<b>Oi</b>");
+        expect(aoMudar).toHaveBeenLastCalledWith("<b>Oi</b>");
+        escrever("<br>");
+        expect(aoMudar).toHaveBeenLastCalledWith("");
+        expect(area().innerHTML).toBe("");
+    });
+    it("colar entra como texto puro (insertText) e não deixa o HTML colado passar", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "x" }));
+        const evento = new Event("paste", { bubbles: true, cancelable: true });
+        Object.defineProperty(evento, "clipboardData", { value: { getData: (tipo) => (tipo === "text/plain" ? "texto puro" : "<b>html</b>") } });
+        area().dispatchEvent(evento);
+        expect(evento.defaultPrevented).toBe(true);
+        expect(execCommand).toHaveBeenCalledWith("insertText", false, "texto puro");
+    });
+    it("controlado: um value novo de fora reescreve; o mesmo que o editor emitiu não", () => {
+        function Pai() {
+            const [html, setHtml] = useState("<p>um</p>");
+            return (_jsxs(_Fragment, { children: [_jsx(RichTextEditor, { ariaLabel: "x", value: html, onChange: setHtml }), _jsx("button", { onClick: () => setHtml("<p>dois</p>"), children: "trocar" })] }));
+        }
+        render(_jsx(Pai, {}));
+        expect(area().innerHTML).toBe("<p>um</p>");
+        escrever("<p>um mais</p>");
+        expect(area().innerHTML).toBe("<p>um mais</p>");
+        fireEvent.click(screen.getByText("trocar"));
+        expect(area().innerHTML).toBe("<p>dois</p>");
+    });
+});
+describe("RichTextEditor: ferramentas", () => {
+    it("clicar em Negrito pede o comando ao navegador e avisa onChange", async () => {
+        const usuario = userEvent.setup();
+        const aoMudar = vi.fn();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", onChange: aoMudar, defaultValue: "<p>x</p>" }));
+        await usuario.click(screen.getByRole("button", { name: "Negrito" }));
+        expect(execCommand).toHaveBeenCalledWith("bold", false, undefined);
+        expect(aoMudar).toHaveBeenCalled();
+    });
+    it("cada ferramenta pede o seu comando", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", toolbar: ["bold", "italic", "underline", "strike", "ul", "ol", "undo", "redo", "clear"] }));
+        const esperado = {
+            Negrito: "bold",
+            Itálico: "italic",
+            Sublinhado: "underline",
+            Tachado: "strikeThrough",
+            "Lista com marcadores": "insertUnorderedList",
+            "Lista numerada": "insertOrderedList",
+            Desfazer: "undo",
+            Refazer: "redo",
+            "Limpar formatação": "removeFormat",
+        };
+        for (const [nome, comando] of Object.entries(esperado)) {
+            execCommand.mockClear();
+            await usuario.click(screen.getByRole("button", { name: nome }));
+            expect(execCommand).toHaveBeenCalledWith(comando, false, undefined);
+        }
+    });
+    it("o clique na barra não rouba o foco da área (mousedown é impedido)", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "x" }));
+        const evento = new MouseEvent("mousedown", { bubbles: true, cancelable: true });
+        screen.getByRole("button", { name: "Negrito" }).dispatchEvent(evento);
+        expect(evento.defaultPrevented).toBe(true);
+    });
+    it("os botões de liga/desliga seguem o cursor (aria-pressed)", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "x", defaultValue: "<p>x</p>" }));
+        const negrito = screen.getByRole("button", { name: "Negrito" });
+        expect(negrito).toHaveAttribute("aria-pressed", "false");
+        estados.bold = true;
+        selecionarTudoNaArea();
+        fireEvent(document, new Event("selectionchange"));
+        expect(negrito).toHaveAttribute("aria-pressed", "true");
+        expect(negrito).toHaveClass("umds-rte__tool--active");
+        expect(screen.getByRole("button", { name: "Itálico" })).toHaveAttribute("aria-pressed", "false");
+        expect(screen.getByRole("button", { name: "Link" })).not.toHaveAttribute("aria-pressed");
+    });
+    it("Tab entra numa parada só; setas, Home e End movem entre as ferramentas", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", toolbar: ["bold", "italic", "underline"] }));
+        const botoes = screen.getAllByRole("button");
+        expect(botoes.map((b) => b.getAttribute("tabindex"))).toEqual(["0", "-1", "-1"]);
+        botoes[0].focus();
+        await usuario.keyboard("{ArrowRight}");
+        expect(botoes[1]).toHaveFocus();
+        await usuario.keyboard("{End}");
+        expect(botoes[2]).toHaveFocus();
+        await usuario.keyboard("{ArrowRight}");
+        expect(botoes[0]).toHaveFocus();
+        await usuario.keyboard("{ArrowLeft}");
+        expect(botoes[2]).toHaveFocus();
+        await usuario.keyboard("{Home}");
+        expect(botoes[0]).toHaveFocus();
+    });
+    it("readOnly: sem barra e a área não edita; disabled: botões desabilitados", () => {
+        const { rerender } = render(_jsx(RichTextEditor, { ariaLabel: "x", readOnly: true, defaultValue: "<p>x</p>" }));
+        expect(screen.queryByRole("toolbar")).toBeNull();
+        expect(area()).toHaveAttribute("contenteditable", "false");
+        rerender(_jsx(RichTextEditor, { ariaLabel: "x", disabled: true }));
+        for (const b of screen.getAllByRole("button"))
+            expect(b).toBeDisabled();
+        expect(area()).toHaveAttribute("tabindex", "-1");
+    });
+});
+describe("RichTextEditor: link", () => {
+    it("o botão Link abre o campo, com foco nele; Esc fecha", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", defaultValue: "<p>texto</p>" }));
+        await usuario.click(screen.getByRole("button", { name: "Link" }));
+        const campo = screen.getByLabelText("Endereço do link");
+        expect(campo).toHaveFocus();
+        await usuario.keyboard("{Escape}");
+        expect(screen.queryByLabelText("Endereço do link")).toBeNull();
+    });
+    it("Ctrl+K abre o campo de link", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "x" }));
+        fireEvent.keyDown(area(), { key: "k", ctrlKey: true });
+        expect(screen.getByLabelText("Endereço do link")).toBeInTheDocument();
+    });
+    it("com texto escolhido, aplicar cria o link; endereço sem esquema ganha https://", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", defaultValue: "<p>texto</p>" }));
+        selecionarTudoNaArea();
+        await usuario.click(screen.getByRole("button", { name: "Link" }));
+        await usuario.type(screen.getByLabelText("Endereço do link"), "exemplo.com.br");
+        await usuario.click(screen.getByRole("button", { name: "Aplicar" }));
+        expect(execCommand).toHaveBeenCalledWith("createLink", false, "https://exemplo.com.br");
+        expect(screen.queryByLabelText("Endereço do link")).toBeNull();
+    });
+    it("sem texto escolhido, o endereço vira o texto do link", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", defaultValue: "<p>texto</p>" }));
+        const selecao = window.getSelection();
+        const faixa = document.createRange();
+        faixa.setStart(area().querySelector("p").firstChild, 2);
+        faixa.collapse(true);
+        selecao.removeAllRanges();
+        selecao.addRange(faixa);
+        await usuario.click(screen.getByRole("button", { name: "Link" }));
+        await usuario.type(screen.getByLabelText("Endereço do link"), "https://1doc.com.br{Enter}");
+        expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<a href="https://1doc.com.br">https://1doc.com.br</a>');
+    });
+    it("endereço perigoso não vira link: mostra o erro e continua aberto", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", defaultValue: "<p>texto</p>" }));
+        selecionarTudoNaArea();
+        await usuario.click(screen.getByRole("button", { name: "Link" }));
+        await usuario.type(screen.getByLabelText("Endereço do link"), "javascript:alert(1)");
+        await usuario.click(screen.getByRole("button", { name: "Aplicar" }));
+        expect(execCommand).not.toHaveBeenCalledWith("createLink", expect.anything(), expect.anything());
+        expect(screen.getByText("Use um endereço http, https, mailto ou tel.")).toBeInTheDocument();
+        expect(screen.getByLabelText("Endereço do link")).toBeInTheDocument();
+    });
+    it("em cima de um link existente, o campo vem preenchido e Remover link aparece", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", defaultValue: '<p><a href="https://1doc.com.br">site</a></p>' }));
+        const selecao = window.getSelection();
+        const faixa = document.createRange();
+        faixa.setStart(area().querySelector("a").firstChild, 1);
+        faixa.collapse(true);
+        selecao.removeAllRanges();
+        selecao.addRange(faixa);
+        await usuario.click(screen.getByRole("button", { name: "Link" }));
+        expect(screen.getByLabelText("Endereço do link")).toHaveValue("https://1doc.com.br");
+        await usuario.click(screen.getByRole("button", { name: "Remover link" }));
+        expect(execCommand).toHaveBeenCalledWith("unlink", false, undefined);
+    });
+    it("os textos do campo de link vêm por labels", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", labels: { linkAddress: "Link address", linkApply: "Apply", linkCancel: "Cancel" } }));
+        await usuario.click(screen.getByRole("button", { name: "Link" }));
+        expect(screen.getByLabelText("Link address")).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Apply" })).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
+    });
+});
+describe("html-seguro", () => {
+    it("enderecoSeguro aceita http, https, mailto, tel, caminho e âncora; recusa o resto", () => {
+        for (const ok of ["https://a.com", "http://a.com", "mailto:a@b.com", "tel:+5584999999999", "/x", "./x", "../x", "#topo"]) {
+            expect(enderecoSeguro(ok)).toBe(ok);
+        }
+        for (const mau of ["javascript:alert(1)", "JaVaScRiPt:alert(1)", "java\nscript:alert(1)", "data:text/html,x", "vbscript:x", "exemplo.com"]) {
+            expect(enderecoSeguro(mau)).toBe("");
+        }
+    });
+    it("normalizarEndereco põe https:// no que não tem esquema e recusa o perigoso", () => {
+        expect(normalizarEndereco("exemplo.com.br")).toBe("https://exemplo.com.br");
+        expect(normalizarEndereco("  https://a.com ")).toBe("https://a.com");
+        expect(normalizarEndereco("javascript:alert(1)")).toBe("");
+        expect(normalizarEndereco("java\tscript:alert(1)")).toBe("");
+        expect(normalizarEndereco("")).toBe("");
+    });
+    it("sanitizarHtml tira tags desconhecidas mantendo o conteúdo e descarta as perigosas inteiras", () => {
+        expect(sanitizarHtml("<font color=red>a</font><iframe src=x>b</iframe><style>p{}</style>c")).toBe("ac");
+        expect(sanitizarHtml("<ul><li>um</li><li><b>dois</b></li></ul>")).toBe("<ul><li>um</li><li><b>dois</b></li></ul>");
+    });
+});

package/dist/teste/RichTextEditorAlinhaImagemTabela.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/RichTextEditorAlinhaImagemTabela.test.js

@@ -0,0 +1,212 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import RichTextEditor from "../components/RichTextEditor/RichTextEditor";
+import { htmlDaTabela, htmlVazio, imagemSegura, sanitizarHtml } from "../utils/html-seguro";
+let execCommand;
+let estados;
+beforeEach(() => {
+    estados = {};
+    execCommand = vi.fn(() => true);
+    document.execCommand = execCommand;
+    document.queryCommandState = (comando) => !!estados[comando];
+});
+const area = () => screen.getByRole("textbox");
+const PNG = "data:image/png;base64,iVBORw0KGgo=";
+describe("html-seguro: alinhamento, imagem e tabela", () => {
+    it("text-align fica nos blocos, em style ou em align; o resto do style sai", () => {
+        expect(sanitizarHtml('<p style="text-align: center; color: red">a</p>')).toBe('<p style="text-align: center;">a</p>');
+        expect(sanitizarHtml('<div align="right">a</div>')).toBe('<div style="text-align: right;">a</div>');
+        expect(sanitizarHtml('<p style="text-align: expression(alert(1))">a</p>')).toBe("<p>a</p>");
+        expect(sanitizarHtml('<li style="text-align:justify">a</li>')).toBe('<li style="text-align: justify;">a</li>');
+        expect(sanitizarHtml('<b style="text-align:center">a</b>')).toBe("<b>a</b>");
+    });
+    it("imagem: http(s), caminho e data:image em PNG, JPEG, GIF e WebP ficam; o resto some inteiro", () => {
+        expect(sanitizarHtml('<img src="https://a.com/x.png" alt="Brasão" onerror="x()">')).toBe('<img src="https://a.com/x.png" alt="Brasão">');
+        expect(sanitizarHtml('<img src="/img/x.png">')).toBe('<img src="/img/x.png" alt="">');
+        expect(sanitizarHtml(`<img src="${PNG}" alt="a">`)).toBe(`<img src="${PNG}" alt="a">`);
+        for (const mau of ["javascript:alert(1)", "x", "data:image/svg+xml;base64,PHN2Zz4=", "data:text/html;base64,PGI+", "//evil.com/x.png", "ftp://a/x.png"]) {
+            expect(sanitizarHtml(`<p>a<img src="${mau}">b</p>`)).toBe("<p>ab</p>");
+        }
+    });
+    it("imagemSegura devolve vazio para o perigoso", () => {
+        expect(imagemSegura("java\nscript:alert(1)")).toBe("");
+        expect(imagemSegura("https://a.com/x.png")).toBe("https://a.com/x.png");
+        expect(imagemSegura("")).toBe("");
+    });
+    it("tabela simples: tags e colspan/rowspan ficam; atributos soltos saem", () => {
+        const html = '<table class="x" onclick="a()"><thead><tr><th colspan="2">T</th></tr></thead><tbody><tr><td rowspan="3" style="color:red">a</td><td colspan="x">b</td></tr></tbody></table>';
+        expect(sanitizarHtml(html)).toBe('<table><thead><tr><th colspan="2">T</th></tr></thead><tbody><tr><td rowspan="3">a</td><td>b</td></tr></tbody></table>');
+    });
+    it("htmlVazio: imagem e tabela contam como conteúdo", () => {
+        expect(htmlVazio("<img src='/a.png'>")).toBe(false);
+        expect(htmlVazio(htmlDaTabela(1, 1))).toBe(false);
+        expect(htmlVazio("<p><br></p>")).toBe(true);
+    });
+    it("htmlDaTabela faz linhas × colunas de células com quebra", () => {
+        const celulas = (htmlDaTabela(2, 3).match(/<td><br><\/td>/g) || []).length;
+        expect(celulas).toBe(6);
+        expect((htmlDaTabela(2, 3).match(/<tr>/g) || []).length).toBe(2);
+    });
+});
+describe("RichTextEditor: alinhamento", () => {
+    it("as quatro ferramentas de alinhamento pedem o comando e seguem o cursor", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", toolbar: ["alignLeft", "alignCenter", "alignRight", "alignJustify"], defaultValue: "<p>x</p>" }));
+        const esperado = {
+            "Alinhar à esquerda": "justifyLeft",
+            Centralizar: "justifyCenter",
+            "Alinhar à direita": "justifyRight",
+            Justificar: "justifyFull",
+        };
+        for (const [nome, comando] of Object.entries(esperado)) {
+            execCommand.mockClear();
+            await usuario.click(screen.getByRole("button", { name: nome }));
+            expect(execCommand).toHaveBeenCalledWith(comando, false, undefined);
+        }
+        estados.justifyCenter = true;
+        const faixa = document.createRange();
+        faixa.selectNodeContents(area());
+        window.getSelection().removeAllRanges();
+        window.getSelection().addRange(faixa);
+        fireEvent(document, new Event("selectionchange"));
+        expect(screen.getByRole("button", { name: "Centralizar" })).toHaveAttribute("aria-pressed", "true");
+        expect(screen.getByRole("button", { name: "Justificar" })).toHaveAttribute("aria-pressed", "false");
+    });
+    it("a barra padrão não ganha as ferramentas novas", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "x" }));
+        for (const nome of ["Centralizar", "Imagem", "Tabela"])
+            expect(screen.queryByRole("button", { name: nome })).toBeNull();
+    });
+});
+describe("RichTextEditor: imagem", () => {
+    const abrirImagem = async (props = {}, botao = "Imagem") => {
+        const usuario = userEvent.setup();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", toolbar: ["image"], defaultValue: "<p>texto</p>", ...props }));
+        await usuario.click(screen.getByRole("button", { name: botao }));
+        return usuario;
+    };
+    it("o botão abre o painel com foco no endereço; Esc fecha", async () => {
+        const usuario = await abrirImagem();
+        expect(screen.getByLabelText("Endereço da imagem")).toHaveFocus();
+        expect(screen.getByLabelText("Texto alternativo")).toBeInTheDocument();
+        await usuario.keyboard("{Escape}");
+        expect(screen.queryByLabelText("Endereço da imagem")).toBeNull();
+    });
+    it("endereço e texto alternativo inserem o img com alt", async () => {
+        const aoMudar = vi.fn();
+        const usuario = await abrirImagem({ onChange: aoMudar });
+        await usuario.type(screen.getByLabelText("Endereço da imagem"), "exemplo.com.br/brasao.png");
+        await usuario.type(screen.getByLabelText("Texto alternativo"), "Brasão da prefeitura");
+        await usuario.click(screen.getByRole("button", { name: "Inserir imagem" }));
+        expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<img src="https://exemplo.com.br/brasao.png" alt="Brasão da prefeitura">');
+        expect(screen.queryByLabelText("Endereço da imagem")).toBeNull();
+        expect(aoMudar).toHaveBeenCalled();
+    });
+    it("endereço perigoso mostra o erro e o painel continua aberto", async () => {
+        const usuario = await abrirImagem();
+        await usuario.type(screen.getByLabelText("Endereço da imagem"), "javascript:alert(1)");
+        await usuario.click(screen.getByRole("button", { name: "Inserir imagem" }));
+        expect(screen.getByText("Use um endereço http ou https, ou escolha um arquivo.")).toBeInTheDocument();
+        expect(execCommand).not.toHaveBeenCalledWith("insertHTML", expect.anything(), expect.anything());
+        expect(screen.getByLabelText("Endereço da imagem")).toBeInTheDocument();
+    });
+    it("arquivo vira data URL e entra no img", async () => {
+        const usuario = await abrirImagem();
+        const entrada = document.querySelector('input[type="file"]');
+        const arquivo = new File([new Uint8Array([137, 80, 78, 71])], "brasao.png", { type: "image/png" });
+        fireEvent.change(entrada, { target: { files: [arquivo] } });
+        await waitFor(() => expect(screen.getByText("brasao.png")).toBeInTheDocument());
+        await usuario.click(screen.getByRole("button", { name: "Inserir imagem" }));
+        const chamada = execCommand.mock.calls.find((c) => c[0] === "insertHTML");
+        expect(chamada[2]).toMatch(/^<img src="data:image\/png;base64,[A-Za-z0-9+/=]+" alt="">$/);
+    });
+    it("arquivo que não é PNG, JPEG, GIF ou WebP é recusado; acima de 2 MB também", async () => {
+        await abrirImagem();
+        const entrada = document.querySelector('input[type="file"]');
+        fireEvent.change(entrada, { target: { files: [new File(["x"], "a.svg", { type: "image/svg+xml" })] } });
+        expect(await screen.findByText("Use uma imagem PNG, JPEG, GIF ou WebP.")).toBeInTheDocument();
+        const grande = new File(["x"], "g.png", { type: "image/png" });
+        Object.defineProperty(grande, "size", { value: 3 * 1024 * 1024 });
+        fireEvent.change(entrada, { target: { files: [grande] } });
+        expect(await screen.findByText("A imagem passa de 2 MB.")).toBeInTheDocument();
+    });
+    it("os textos do painel vêm por labels", async () => {
+        await abrirImagem({ labels: { image: "Image", imageUrl: "Image address", imageAlt: "Alt text", imageApply: "Insert image", imageCancel: "Cancel", imageFile: "Choose file" } }, "Image");
+        expect(screen.getByLabelText("Image address")).toBeInTheDocument();
+        expect(screen.getByLabelText("Alt text")).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Insert image" })).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Choose file" })).toBeInTheDocument();
+    });
+});
+describe("RichTextEditor: tabela", () => {
+    it("o painel insere linhas × colunas; o padrão é 3 × 3", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", toolbar: ["table"] }));
+        await usuario.click(screen.getByRole("button", { name: "Tabela" }));
+        expect(screen.getByLabelText("Linhas")).toHaveFocus();
+        await usuario.clear(screen.getByLabelText("Linhas"));
+        await usuario.type(screen.getByLabelText("Linhas"), "2");
+        await usuario.click(screen.getByRole("button", { name: "Inserir tabela" }));
+        const chamada = execCommand.mock.calls.find((c) => c[0] === "insertHTML");
+        expect(chamada[2]).toBe(htmlDaTabela(2, 3));
+    });
+    it("fora de 1 a 20 linhas e 1 a 10 colunas mostra o erro e não insere", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", toolbar: ["table"] }));
+        await usuario.click(screen.getByRole("button", { name: "Tabela" }));
+        await usuario.clear(screen.getByLabelText("Colunas"));
+        await usuario.type(screen.getByLabelText("Colunas"), "11");
+        await usuario.click(screen.getByRole("button", { name: "Inserir tabela" }));
+        expect(screen.getByText("Use de 1 a 20 linhas e de 1 a 10 colunas.")).toBeInTheDocument();
+        expect(execCommand).not.toHaveBeenCalledWith("insertHTML", expect.anything(), expect.anything());
+    });
+    const TABELA = "<table><tbody><tr><td>a</td><td>b</td></tr><tr><td>c</td><td>d</td></tr></tbody></table>";
+    const cursorNaCelula = (indice) => {
+        const celula = area().querySelectorAll("td")[indice];
+        const faixa = document.createRange();
+        faixa.selectNodeContents(celula);
+        window.getSelection().removeAllRanges();
+        window.getSelection().addRange(faixa);
+        fireEvent(document, new Event("selectionchange"));
+    };
+    it("com o cursor numa célula aparece a barra; sem tabela na toolbar, não aparece", async () => {
+        const { rerender } = render(_jsx(RichTextEditor, { ariaLabel: "x", toolbar: ["table"], defaultValue: TABELA }));
+        expect(screen.queryByRole("group", { name: "Tabela" })).toBeNull();
+        cursorNaCelula(0);
+        expect(await screen.findByRole("group", { name: "Tabela" })).toBeInTheDocument();
+        rerender(_jsx(RichTextEditor, { ariaLabel: "x", toolbar: ["bold"], defaultValue: TABELA }));
+        expect(screen.queryByRole("group", { name: "Tabela" })).toBeNull();
+    });
+    it("adiciona e remove linha e coluna na célula do cursor e avisa onChange", async () => {
+        const usuario = userEvent.setup();
+        const aoMudar = vi.fn();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", toolbar: ["table"], defaultValue: TABELA, onChange: aoMudar }));
+        cursorNaCelula(0);
+        await usuario.click(await screen.findByRole("button", { name: "Adicionar coluna" }));
+        expect(area().querySelectorAll("tr")[0].cells.length).toBe(3);
+        expect(area().querySelectorAll("tr")[1].cells.length).toBe(3);
+        expect(aoMudar).toHaveBeenCalled();
+        cursorNaCelula(0);
+        await usuario.click(await screen.findByRole("button", { name: "Adicionar linha" }));
+        expect(area().querySelectorAll("tr")).toHaveLength(3);
+        cursorNaCelula(0);
+        await usuario.click(await screen.findByRole("button", { name: "Remover linha" }));
+        expect(area().querySelectorAll("tr")).toHaveLength(2);
+        cursorNaCelula(0);
+        await usuario.click(await screen.findByRole("button", { name: "Remover coluna" }));
+        expect(area().querySelectorAll("tr")[0].cells.length).toBe(2);
+        cursorNaCelula(0);
+        await usuario.click(await screen.findByRole("button", { name: "Remover tabela" }));
+        expect(area().querySelector("table")).toBeNull();
+        expect(screen.queryByRole("group", { name: "Tabela" })).toBeNull();
+    });
+    it("remover a única linha ou coluna remove a tabela", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", toolbar: ["table"], defaultValue: "<table><tbody><tr><td>a</td></tr></tbody></table>" }));
+        cursorNaCelula(0);
+        await usuario.click(await screen.findByRole("button", { name: "Remover linha" }));
+        expect(area().querySelector("table")).toBeNull();
+    });
+});

package/dist/teste/RichTextEditorEstiloDeTexto.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/RichTextEditorEstiloDeTexto.test.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import RichTextEditor from "../components/RichTextEditor/RichTextEditor";
+import { estiloDeTexto, sanitizarHtml } from "../utils/html-seguro";
+let execCommand;
+beforeEach(() => {
+    execCommand = vi.fn(() => true);
+    document.execCommand = execCommand;
+    document.queryCommandState = () => false;
+});
+const area = () => screen.getByRole("textbox");
+const selecionarTexto = () => {
+    const alvo = area().querySelector("p").firstChild;
+    const faixa = document.createRange();
+    faixa.setStart(alvo, 0);
+    faixa.setEnd(alvo, alvo.length);
+    window.getSelection().removeAllRanges();
+    window.getSelection().addRange(faixa);
+};
+const abrir = (toolbar, props = {}) => render(_jsx(RichTextEditor, { ariaLabel: "x", toolbar: toolbar, defaultValue: "<p>Parecer</p>", ...props }));
+describe("html-seguro: estilo de texto por token", () => {
+    it("estiloDeTexto só aceita token do DS", () => {
+        expect(estiloDeTexto("color", "var(--umds-primitive-red-pure)")).toBe("color: var(--umds-primitive-red-pure);");
+        expect(estiloDeTexto("color", "var(--umds-semantic-color-feedback-negative-pure)")).toBe("color: var(--umds-semantic-color-feedback-negative-pure);");
+        expect(estiloDeTexto("font-size", "var(--umds-primitive-font-size-xs)")).toBe("font-size: var(--umds-primitive-font-size-xs);");
+        expect(estiloDeTexto("font-family", "var(--umds-semantic-font-family-mono)")).toBe("font-family: var(--umds-semantic-font-family-mono);");
+        for (const mau of ["red", "#ff0000", "rgb(255,0,0)", "var(--outra-coisa)", "var(--umds-primitive-red-pure); background: red", "expression(alert(1))", "url(x)"]) {
+            expect(estiloDeTexto("color", mau)).toBe("");
+        }
+        expect(estiloDeTexto("font-size", "12px")).toBe("");
+        expect(estiloDeTexto("font-size", "var(--umds-primitive-red-pure)")).toBe("");
+        expect(estiloDeTexto("font-family", "Comic Sans MS")).toBe("");
+        expect(estiloDeTexto("background", "var(--umds-primitive-red-pure)")).toBe("");
+    });
+    it("o span guarda só as declarações válidas; o resto do style sai", () => {
+        expect(sanitizarHtml('<span style="color: var(--umds-primitive-red-pure); background: red; font-size: 40px">a</span>')).toBe('<span style="color: var(--umds-primitive-red-pure);">a</span>');
+        expect(sanitizarHtml('<span style="font-family: var(--umds-semantic-font-family-mono); font-size: var(--umds-primitive-font-size-sm)">a</span>')).toBe('<span style="font-family: var(--umds-semantic-font-family-mono); font-size: var(--umds-primitive-font-size-sm);">a</span>');
+        expect(sanitizarHtml('<span style="color: red">a</span>')).toBe("<span>a</span>");
+    });
+    it("estilo só vale em span: em outras tags sai", () => {
+        expect(sanitizarHtml('<b style="color: var(--umds-primitive-red-pure)">a</b>')).toBe("<b>a</b>");
+        expect(sanitizarHtml('<p style="color: var(--umds-primitive-red-pure)">a</p>')).toBe("<p>a</p>");
+    });
+});
+describe("RichTextEditor: fonte, tamanho e cor do texto", () => {
+    it("a barra padrão não ganha as ferramentas novas", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "x" }));
+        for (const nome of ["Fonte", "Tamanho da fonte", "Cor do texto"])
+            expect(screen.queryByRole("button", { name: nome })).toBeNull();
+    });
+    it("cada ferramenta abre um painel nomeado abaixo da barra; Fechar e Esc fecham", async () => {
+        const usuario = userEvent.setup();
+        abrir(["fontFamily", "fontSize", "textColor"]);
+        await usuario.click(screen.getByRole("button", { name: "Tamanho da fonte" }));
+        expect(screen.getByRole("group", { name: "Tamanho da fonte" })).toBeInTheDocument();
+        await usuario.click(screen.getByRole("button", { name: "Fechar" }));
+        expect(screen.queryByRole("group", { name: "Tamanho da fonte" })).toBeNull();
+        await usuario.click(screen.getByRole("button", { name: "Cor do texto" }));
+        expect(screen.getByRole("group", { name: "Cor do texto" })).toBeInTheDocument();
+        fireEvent.keyDown(screen.getByRole("group", { name: "Cor do texto" }), { key: "Escape" });
+        expect(screen.queryByRole("group", { name: "Cor do texto" })).toBeNull();
+    });
+    it("a fonte monoespaçada embrulha o texto selecionado num span com o token", async () => {
+        const usuario = userEvent.setup();
+        const aoMudar = vi.fn();
+        abrir(["fontFamily"], { onChange: aoMudar });
+        selecionarTexto();
+        await usuario.click(screen.getByRole("button", { name: "Fonte" }));
+        await usuario.click(screen.getByRole("combobox", { name: "Fonte" }));
+        await usuario.click(screen.getByRole("option", { name: "Monoespaçada" }));
+        expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<span style="font-family: var(--umds-semantic-font-family-mono);">Parecer</span>');
+        expect(aoMudar).toHaveBeenCalled();
+        expect(screen.queryByRole("group", { name: "Fonte" })).toBeNull();
+    });
+    it("o tamanho usa os degraus da escala do DS", async () => {
+        const usuario = userEvent.setup();
+        abrir(["fontSize"]);
+        selecionarTexto();
+        await usuario.click(screen.getByRole("button", { name: "Tamanho da fonte" }));
+        await usuario.click(screen.getByRole("combobox", { name: "Tamanho da fonte" }));
+        const opcoes = screen.getAllByRole("option").map((o) => o.textContent);
+        expect(opcoes).toEqual(["12", "14", "16", "20", "24"]);
+        await usuario.click(screen.getByRole("option", { name: "20" }));
+        expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<span style="font-size: var(--umds-primitive-font-size-sm);">Parecer</span>');
+    });
+    it("a cor vem da paleta do DS e vira var() do token", async () => {
+        const usuario = userEvent.setup();
+        abrir(["textColor"]);
+        selecionarTexto();
+        await usuario.click(screen.getByRole("button", { name: "Cor do texto" }));
+        await usuario.click(screen.getByRole("radio", { name: "Vermelho" }));
+        expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<span style="color: var(--umds-primitive-red-pure);">Parecer</span>');
+    });
+    it("sem texto selecionado o painel pede a seleção e não aplica nada", async () => {
+        const usuario = userEvent.setup();
+        abrir(["textColor"]);
+        window.getSelection().removeAllRanges();
+        await usuario.click(screen.getByRole("button", { name: "Cor do texto" }));
+        await usuario.click(screen.getByRole("radio", { name: "Vermelho" }));
+        expect(screen.getByText("Selecione o texto antes de aplicar.")).toBeInTheDocument();
+        expect(execCommand).not.toHaveBeenCalledWith("insertHTML", expect.anything(), expect.anything());
+        expect(screen.getByRole("group", { name: "Cor do texto" })).toBeInTheDocument();
+    });
+    it("os textos vêm por labels", async () => {
+        const usuario = userEvent.setup();
+        abrir(["fontFamily", "textColor"], { labels: { fontFamily: "Font", textColor: "Text color", fontFamilyMono: "Monospaced", styleClose: "Close" } });
+        selecionarTexto();
+        await usuario.click(screen.getByRole("button", { name: "Font" }));
+        await usuario.click(screen.getByRole("combobox", { name: "Font" }));
+        expect(screen.getByRole("option", { name: "Monospaced" })).toBeInTheDocument();
+        await usuario.keyboard("{Escape}");
+        expect(screen.getByRole("button", { name: "Close" })).toBeInTheDocument();
+    });
+    it("o valor volta higienizado com o estilo por token", () => {
+        abrir(["textColor"], { defaultValue: '<p><span style="color: var(--umds-primitive-blue-pure); background: red">a</span></p>' });
+        expect(area().innerHTML).toBe('<p><span style="color: var(--umds-primitive-blue-pure);">a</span></p>');
+    });
+});

package/dist/teste/SegmentedControlContador.test.d.ts

@@ -0,0 +1 @@
+export {};