@1doc/1ds-react 2.8.0 → 2.10.0

package/dist/components/RichTextEditor/RichTextEditor.js

@@ -0,0 +1,951 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import './RichTextEditor.css';
+import * as React from "react";
+import { useState, useRef, useEffect } from "react";
+import { faBold, faItalic, faUnderline, faStrikethrough, faListUl, faListOl, faLink, faRotateLeft, faRotateRight, faEraser, faAlignLeft, faAlignCenter, faAlignRight, faAlignJustify, faImage, faTable, faFont, faTextHeight, faPalette, } from "@fortawesome/free-solid-svg-icons";
+import Button from "../Button/Button";
+import ColorPicker from "../ColorPicker/ColorPicker";
+import Select from "../Select/Select";
+import Icon from "../Icon/Icon";
+import Input from "../Input/Input";
+import Text from "../Text/Text";
+import { gerarId } from "../../utils/id";
+import { htmlDaImagem, htmlDaTabela, htmlDoLink, estiloDeTexto, htmlVazio, imagemSegura, normalizarEndereco, sanitizarHtml, } from "../../utils/html-seguro";
+function RichTextEditor(props) {
+    const editorRef = useRef(null);
+    const toolbarRef = useRef(null);
+    const linkInputWrapRef = useRef(null);
+    const ultimoEmitidoRef = useRef("");
+    const selecaoRef = useRef(null);
+    const focoPendenteRef = useRef("");
+    const observadorRef = useRef(null);
+    const imageInputWrapRef = useRef(null);
+    const tableInputWrapRef = useRef(null);
+    const fileInputRef = useRef(null);
+    const celulaRef = useRef(null);
+    const styleWrapRef = useRef(null);
+    const [uid, setUid] = useState(() => "");
+    const [linkOpen, setLinkOpen] = useState(() => false);
+    const [linkUrl, setLinkUrl] = useState(() => "");
+    const [linkError, setLinkError] = useState(() => false);
+    const [toolFocus, setToolFocus] = useState(() => 0);
+    const [active, setActive] = useState(() => "");
+    const [styleOpen, setStyleOpen] = useState(() => "");
+    const [styleError, setStyleError] = useState(() => false);
+    const [imageOpen, setImageOpen] = useState(() => false);
+    const [imgUrl, setImgUrl] = useState(() => "");
+    const [imgAlt, setImgAlt] = useState(() => "");
+    const [imgData, setImgData] = useState(() => "");
+    const [imgFileName, setImgFileName] = useState(() => "");
+    const [imgError, setImgError] = useState(() => "");
+    const [tableOpen, setTableOpen] = useState(() => false);
+    const [tblRows, setTblRows] = useState(() => "3");
+    const [tblCols, setTblCols] = useState(() => "3");
+    const [tblError, setTblError] = useState(() => false);
+    const [inTable, setInTable] = useState(() => false);
+    function baseId() {
+        return props.id || uid;
+    }
+    function labelId() {
+        return baseId() && props.label ? baseId() + "-label" : undefined;
+    }
+    function editorId() {
+        return baseId() ? baseId() + "-editor" : undefined;
+    }
+    function errorId() {
+        return baseId() && props.errorMessage ? baseId() + "-error" : undefined;
+    }
+    function helperId() {
+        return baseId() && props.helperText ? baseId() + "-helper" : undefined;
+    }
+    function describedBy() {
+        const ids = [errorId(), helperId()].filter(Boolean).join(" ");
+        return ids || undefined;
+    }
+    function editorAriaLabel() {
+        if (props.ariaLabel)
+            return props.ariaLabel;
+        return props.label && !labelId() ? props.label : undefined;
+    }
+    function isInvalid() {
+        return !!props.invalid || !!props.errorMessage;
+    }
+    function isEditable() {
+        return !props.disabled && !props.readOnly;
+    }
+    function editableText() {
+        return isEditable() ? "true" : "false";
+    }
+    function showToolbar() {
+        return !props.readOnly;
+    }
+    function classes() {
+        return [
+            "umds-rte",
+            isInvalid() ? "umds-rte--invalid" : "",
+            props.disabled ? "umds-rte--disabled" : "",
+            props.readOnly ? "umds-rte--readonly" : "",
+            props.resizable ? "umds-rte--resizable" : "",
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function editorStyle() {
+        const altura = props.minHeight !== undefined && props.minHeight !== null
+            ? props.minHeight
+            : 0;
+        return altura
+            ? {
+                minHeight: altura + "px",
+            }
+            : undefined;
+    }
+    function rotulo(chave) {
+        const padrao = {
+            bold: "Negrito",
+            italic: "Itálico",
+            underline: "Sublinhado",
+            strike: "Tachado",
+            ul: "Lista com marcadores",
+            ol: "Lista numerada",
+            link: "Link",
+            undo: "Desfazer",
+            redo: "Refazer",
+            clear: "Limpar formatação",
+            linkAddress: "Endereço do link",
+            linkApply: "Aplicar",
+            linkRemove: "Remover link",
+            linkCancel: "Cancelar",
+            linkInvalid: "Use um endereço http, https, mailto ou tel.",
+            alignLeft: "Alinhar à esquerda",
+            alignCenter: "Centralizar",
+            alignRight: "Alinhar à direita",
+            alignJustify: "Justificar",
+            image: "Imagem",
+            table: "Tabela",
+            imageUrl: "Endereço da imagem",
+            imageAlt: "Texto alternativo",
+            imageFile: "Escolher arquivo",
+            imageApply: "Inserir imagem",
+            imageCancel: "Cancelar",
+            imageInvalid: "Use um endereço http ou https, ou escolha um arquivo.",
+            imageType: "Use uma imagem PNG, JPEG, GIF ou WebP.",
+            imageTooLarge: "A imagem passa de 2 MB.",
+            tableRows: "Linhas",
+            tableCols: "Colunas",
+            tableApply: "Inserir tabela",
+            tableCancel: "Cancelar",
+            tableInvalid: "Use de 1 a 20 linhas e de 1 a 10 colunas.",
+            tableActions: "Tabela",
+            tableAddRow: "Adicionar linha",
+            tableRemoveRow: "Remover linha",
+            tableAddCol: "Adicionar coluna",
+            tableRemoveCol: "Remover coluna",
+            tableRemove: "Remover tabela",
+            fontFamily: "Fonte",
+            fontSize: "Tamanho da fonte",
+            textColor: "Cor do texto",
+            fontFamilyBase: "Padrão",
+            fontFamilyMono: "Monoespaçada",
+            styleClose: "Fechar",
+            styleNeedsSelection: "Selecione o texto antes de aplicar.",
+        };
+        const dado = props.labels || {};
+        return dado[chave] || padrao[chave];
+    }
+    function toolbarName() {
+        return props.toolbarLabel || "Formatação";
+    }
+    function tools() {
+        const padrao = [
+            "bold",
+            "italic",
+            "underline",
+            "|",
+            "ul",
+            "ol",
+            "|",
+            "link",
+            "|",
+            "undo",
+            "redo",
+        ];
+        const lista = props.toolbar && props.toolbar.length ? props.toolbar : padrao;
+        const catalogo = {
+            bold: {
+                command: "bold",
+                icon: faBold,
+                toggle: true,
+            },
+            italic: {
+                command: "italic",
+                icon: faItalic,
+                toggle: true,
+            },
+            underline: {
+                command: "underline",
+                icon: faUnderline,
+                toggle: true,
+            },
+            strike: {
+                command: "strikeThrough",
+                icon: faStrikethrough,
+                toggle: true,
+            },
+            ul: {
+                command: "insertUnorderedList",
+                icon: faListUl,
+                toggle: true,
+            },
+            ol: {
+                command: "insertOrderedList",
+                icon: faListOl,
+                toggle: true,
+            },
+            link: {
+                command: "link",
+                icon: faLink,
+                toggle: false,
+            },
+            undo: {
+                command: "undo",
+                icon: faRotateLeft,
+                toggle: false,
+            },
+            redo: {
+                command: "redo",
+                icon: faRotateRight,
+                toggle: false,
+            },
+            clear: {
+                command: "removeFormat",
+                icon: faEraser,
+                toggle: false,
+            },
+            alignLeft: {
+                command: "justifyLeft",
+                icon: faAlignLeft,
+                toggle: true,
+            },
+            alignCenter: {
+                command: "justifyCenter",
+                icon: faAlignCenter,
+                toggle: true,
+            },
+            alignRight: {
+                command: "justifyRight",
+                icon: faAlignRight,
+                toggle: true,
+            },
+            alignJustify: {
+                command: "justifyFull",
+                icon: faAlignJustify,
+                toggle: true,
+            },
+            image: {
+                command: "image",
+                icon: faImage,
+                toggle: false,
+            },
+            table: {
+                command: "table",
+                icon: faTable,
+                toggle: false,
+            },
+            fontFamily: {
+                command: "fontFamily",
+                icon: faFont,
+                toggle: false,
+            },
+            fontSize: {
+                command: "fontSize",
+                icon: faTextHeight,
+                toggle: false,
+            },
+            textColor: {
+                command: "textColor",
+                icon: faPalette,
+                toggle: false,
+            },
+        };
+        const saida = [];
+        let posicao = 0;
+        for (let i = 0; i < lista.length; i++) {
+            const chave = lista[i];
+            if (chave === "|") {
+                saida.push({
+                    key: "sep-" + i,
+                    separator: true,
+                });
+                continue;
+            }
+            const def = catalogo[chave];
+            if (!def)
+                continue;
+            saida.push({
+                key: chave,
+                separator: false,
+                command: def.command,
+                icon: def.icon,
+                toggle: def.toggle,
+                position: posicao,
+                label: rotulo(chave),
+            });
+            posicao = posicao + 1;
+        }
+        return saida;
+    }
+    function estaAtiva(ferramenta) {
+        return (!!ferramenta.toggle &&
+            active.split(",").indexOf(ferramenta.command) !== -1);
+    }
+    function pressedText(ferramenta) {
+        return ferramenta.toggle
+            ? estaAtiva(ferramenta)
+                ? "true"
+                : "false"
+            : undefined;
+    }
+    function toolClasses(ferramenta) {
+        return [
+            "umds-rte__tool",
+            estaAtiva(ferramenta) ? "umds-rte__tool--active" : "",
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function toolTabIndex(ferramenta) {
+        return ferramenta.position === toolFocus ? 0 : -1;
+    }
+    function escreverHtml(html) {
+        if (!editorRef.current)
+            return;
+        const limpo = sanitizarHtml(html || "");
+        if (editorRef.current.innerHTML !== limpo)
+            editorRef.current.innerHTML = limpo;
+    }
+    function selecaoNaArea() {
+        if (typeof window === "undefined" ||
+            !window.getSelection ||
+            !editorRef.current)
+            return false;
+        const selecao = window.getSelection();
+        return (!!selecao &&
+            selecao.rangeCount > 0 &&
+            editorRef.current.contains(selecao.anchorNode));
+    }
+    function celulaAtual() {
+        if (typeof window === "undefined" ||
+            !window.getSelection ||
+            !editorRef.current)
+            return null;
+        const selecao = window.getSelection();
+        if (!selecao || selecao.rangeCount === 0)
+            return null;
+        const no = selecao.anchorNode;
+        const elemento = no && no.nodeType === 3 ? no.parentNode : no;
+        const celula = elemento && elemento.closest ? elemento.closest("td, th") : null;
+        return celula && editorRef.current.contains(celula) ? celula : null;
+    }
+    function lerEstados() {
+        if (typeof document === "undefined" ||
+            typeof document.queryCommandState !== "function")
+            return;
+        if (!selecaoNaArea())
+            return;
+        celulaRef.current = celulaAtual();
+        const dentro = !!celulaRef.current;
+        if (dentro !== inTable)
+            setInTable(dentro);
+        const comandos = [
+            "bold",
+            "italic",
+            "underline",
+            "strikeThrough",
+            "insertUnorderedList",
+            "insertOrderedList",
+            "justifyLeft",
+            "justifyCenter",
+            "justifyRight",
+            "justifyFull",
+        ];
+        const ligados = [];
+        for (let i = 0; i < comandos.length; i++) {
+            try {
+                if (document.queryCommandState(comandos[i]))
+                    ligados.push(comandos[i]);
+            }
+            catch (erro) {
+                // O navegador não conhece o comando: fica desligado.
+            }
+        }
+        const texto = ligados.join(",");
+        if (texto !== active)
+            setActive(texto);
+    }
+    function emitir() {
+        if (!editorRef.current)
+            return;
+        let html = editorRef.current.innerHTML;
+        // Apagou tudo: o navegador deixa um <br> e o placeholder (que é :empty) não volta.
+        if (htmlVazio(html)) {
+            html = "";
+            if (editorRef.current.innerHTML !== "" &&
+                editorRef.current.querySelector("li") === null)
+                editorRef.current.innerHTML = "";
+        }
+        ultimoEmitidoRef.current = html;
+        if (props.onChange)
+            props.onChange(html);
+    }
+    function handleInput() {
+        emitir();
+        lerEstados();
+    }
+    function handlePaste(event) {
+        if (!event || !event.clipboardData)
+            return;
+        // Colar entra como texto puro: sem formatação de outro site e sem HTML estranho.
+        event.preventDefault();
+        const texto = event.clipboardData.getData("text/plain");
+        if (texto && typeof document !== "undefined")
+            document.execCommand("insertText", false, texto);
+    }
+    function handleEditorKeyDown(event) {
+        if (!event)
+            return;
+        if ((event.ctrlKey || event.metaKey) &&
+            !event.altKey &&
+            (event.key === "k" || event.key === "K")) {
+            event.preventDefault();
+            abrirLink();
+        }
+    }
+    function handleBlur(event) {
+        if (props.onBlur)
+            props.onBlur(event);
+    }
+    function handleToolMouseDown(event) {
+        if (event && event.preventDefault)
+            event.preventDefault();
+    }
+    function handleToolClick(ferramenta) {
+        if (!isEditable() || typeof document === "undefined")
+            return;
+        if (ferramenta.command === "link") {
+            abrirLink();
+            return;
+        }
+        if (ferramenta.command === "image") {
+            abrirImagem();
+            return;
+        }
+        if (ferramenta.command === "table") {
+            abrirTabela();
+            return;
+        }
+        if (ferramenta.command === "fontFamily" ||
+            ferramenta.command === "fontSize" ||
+            ferramenta.command === "textColor") {
+            abrirEstilo(ferramenta.command);
+            return;
+        }
+        if (editorRef.current && !selecaoNaArea())
+            editorRef.current.focus();
+        document.execCommand(ferramenta.command, false, undefined);
+        handleInput();
+    }
+    function handleToolFocus(ferramenta) {
+        if (toolFocus !== ferramenta.position)
+            setToolFocus(ferramenta.position);
+    }
+    function handleToolbarKeyDown(event) {
+        if (!event || !toolbarRef.current)
+            return;
+        const tecla = event.key;
+        if (tecla !== "ArrowRight" &&
+            tecla !== "ArrowLeft" &&
+            tecla !== "Home" &&
+            tecla !== "End")
+            return;
+        const botoes = toolbarRef.current.querySelectorAll("button");
+        const total = botoes.length;
+        if (!total)
+            return;
+        let atual = toolFocus;
+        if (tecla === "ArrowRight")
+            atual = (atual + 1) % total;
+        else if (tecla === "ArrowLeft")
+            atual = (atual - 1 + total) % total;
+        else if (tecla === "Home")
+            atual = 0;
+        else
+            atual = total - 1;
+        event.preventDefault();
+        setToolFocus(atual);
+        botoes[atual].focus();
+    }
+    function abrirLink() {
+        if (!isEditable() || typeof window === "undefined" || linkOpen)
+            return;
+        let enderecoAtual = "";
+        selecaoRef.current = null;
+        if (selecaoNaArea()) {
+            const selecao = window.getSelection();
+            selecaoRef.current = selecao.getRangeAt(0).cloneRange();
+            const no = selecao.anchorNode;
+            const elemento = no && no.nodeType === 3 ? no.parentNode : no;
+            const ancora = elemento && elemento.closest ? elemento.closest("a") : null;
+            if (ancora)
+                enderecoAtual = ancora.getAttribute("href") || "";
+        }
+        setLinkUrl(enderecoAtual);
+        setLinkError(false);
+        setImageOpen(false);
+        setTableOpen(false);
+        setStyleOpen("");
+        setLinkOpen(true);
+        focoPendenteRef.current = "link";
+    }
+    function fecharLink() {
+        setLinkOpen(false);
+        setLinkError(false);
+        focoPendenteRef.current = "editor";
+    }
+    function restaurarSelecao() {
+        if (typeof window === "undefined" || !window.getSelection)
+            return;
+        if (editorRef.current)
+            editorRef.current.focus();
+        if (selecaoRef.current) {
+            const selecao = window.getSelection();
+            selecao.removeAllRanges();
+            selecao.addRange(selecaoRef.current);
+        }
+    }
+    function handleLinkInput(texto) {
+        setLinkUrl(texto);
+        if (linkError)
+            setLinkError(false);
+    }
+    function aplicarLink() {
+        if (typeof document === "undefined")
+            return;
+        const endereco = normalizarEndereco(linkUrl);
+        if (!endereco) {
+            setLinkError(true);
+            return;
+        }
+        restaurarSelecao();
+        const selecao = window.getSelection();
+        const semTexto = !!selecao && selecao.isCollapsed;
+        // Sem texto escolhido, o próprio endereço vira o texto do link.
+        const comando = semTexto ? "insertHTML" : "createLink";
+        const argumento = semTexto ? htmlDoLink(endereco) : endereco;
+        document.execCommand(comando, false, argumento);
+        setLinkOpen(false);
+        focoPendenteRef.current = "editor";
+        handleInput();
+    }
+    function removerLink() {
+        if (typeof document === "undefined")
+            return;
+        restaurarSelecao();
+        document.execCommand("unlink", false, undefined);
+        setLinkOpen(false);
+        focoPendenteRef.current = "editor";
+        handleInput();
+    }
+    function handleLinkSubmit(event) {
+        if (event && event.preventDefault)
+            event.preventDefault();
+        aplicarLink();
+    }
+    function handleLinkKeyDown(event) {
+        if (event && event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            fecharLink();
+        }
+    }
+    function guardarSelecao() {
+        selecaoRef.current = null;
+        if (selecaoNaArea() && typeof window !== "undefined") {
+            const selecao = window.getSelection();
+            selecaoRef.current = selecao.getRangeAt(0).cloneRange();
+        }
+    }
+    function abrirImagem() {
+        if (!isEditable() || typeof window === "undefined" || imageOpen)
+            return;
+        guardarSelecao();
+        setImgUrl("");
+        setImgAlt("");
+        setImgData("");
+        setImgFileName("");
+        setImgError("");
+        setLinkOpen(false);
+        setTableOpen(false);
+        setStyleOpen("");
+        setImageOpen(true);
+        focoPendenteRef.current = "image";
+    }
+    function fecharImagem() {
+        setImageOpen(false);
+        setImgError("");
+        focoPendenteRef.current = "editor";
+    }
+    function handleImageUrl(texto) {
+        setImgUrl(texto);
+        setImgData("");
+        setImgFileName("");
+        if (imgError)
+            setImgError("");
+    }
+    function handleImageAlt(texto) {
+        setImgAlt(texto);
+    }
+    function escolherArquivo() {
+        if (fileInputRef.current)
+            fileInputRef.current.click();
+    }
+    function handleArquivo(event) {
+        const alvo = event && event.target ? event.target : null;
+        const arquivo = alvo && alvo.files ? alvo.files[0] : null;
+        if (!arquivo)
+            return;
+        if (!/^image\/(png|jpe?g|gif|webp)$/i.test(String(arquivo.type))) {
+            setImgError("type");
+            return;
+        }
+        if (arquivo.size > 2 * 1024 * 1024) {
+            setImgError("size");
+            return;
+        }
+        const leitor = new FileReader();
+        leitor.onload = () => {
+            setImgData(String(leitor.result || ""));
+            setImgFileName(arquivo.name);
+            setImgUrl("");
+            setImgError("");
+        };
+        leitor.readAsDataURL(arquivo);
+    }
+    function aplicarImagem() {
+        if (typeof document === "undefined")
+            return;
+        const origem = imagemSegura(imgData || normalizarEndereco(imgUrl));
+        if (!origem) {
+            setImgError("invalid");
+            return;
+        }
+        restaurarSelecao();
+        document.execCommand("insertHTML", false, htmlDaImagem(origem, imgAlt));
+        setImageOpen(false);
+        focoPendenteRef.current = "editor";
+        handleInput();
+    }
+    function handleImageSubmit(event) {
+        if (event && event.preventDefault)
+            event.preventDefault();
+        aplicarImagem();
+    }
+    function handlePanelKeyDown(event) {
+        if (!event || event.key !== "Escape")
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (imageOpen)
+            fecharImagem();
+        else
+            fecharTabela();
+    }
+    function imageErrorText() {
+        if (imgError === "invalid")
+            return rotulo("imageInvalid");
+        if (imgError === "type")
+            return rotulo("imageType");
+        if (imgError === "size")
+            return rotulo("imageTooLarge");
+        return undefined;
+    }
+    function abrirTabela() {
+        if (!isEditable() || typeof window === "undefined" || tableOpen)
+            return;
+        guardarSelecao();
+        setTblError(false);
+        setLinkOpen(false);
+        setImageOpen(false);
+        setStyleOpen("");
+        setTableOpen(true);
+        focoPendenteRef.current = "table";
+    }
+    function fecharTabela() {
+        setTableOpen(false);
+        setTblError(false);
+        focoPendenteRef.current = "editor";
+    }
+    function handleTableRows(texto) {
+        setTblRows(texto);
+        if (tblError)
+            setTblError(false);
+    }
+    function handleTableCols(texto) {
+        setTblCols(texto);
+        if (tblError)
+            setTblError(false);
+    }
+    function aplicarTabela() {
+        if (typeof document === "undefined")
+            return;
+        const linhas = parseInt(tblRows, 10);
+        const colunas = parseInt(tblCols, 10);
+        if (!(linhas >= 1 && linhas <= 20 && colunas >= 1 && colunas <= 10)) {
+            setTblError(true);
+            return;
+        }
+        restaurarSelecao();
+        document.execCommand("insertHTML", false, htmlDaTabela(linhas, colunas));
+        setTableOpen(false);
+        focoPendenteRef.current = "editor";
+        handleInput();
+    }
+    function handleTableSubmit(event) {
+        if (event && event.preventDefault)
+            event.preventDefault();
+        aplicarTabela();
+    }
+    function tableErrorText() {
+        return tblError ? rotulo("tableInvalid") : undefined;
+    }
+    function tableBarVisible() {
+        if (!inTable || !isEditable())
+            return false;
+        const lista = props.toolbar || [];
+        return lista.indexOf("table") !== -1;
+    }
+    function handleTableAction(acao) {
+        const celula = celulaRef.current;
+        if (!celula || !editorRef.current || !editorRef.current.contains(celula))
+            return;
+        const linha = celula.parentNode;
+        const tabela = celula.closest("table");
+        if (!linha || !tabela)
+            return;
+        const indice = celula.cellIndex;
+        const linhas = Array.prototype.slice.call(tabela.rows);
+        const nova = (tag) => {
+            const c = document.createElement(tag);
+            c.appendChild(document.createElement("br"));
+            return c;
+        };
+        if (acao === "addRow") {
+            const novaLinha = document.createElement("tr");
+            for (let i = 0; i < linha.cells.length; i++)
+                novaLinha.appendChild(nova("td"));
+            linha.parentNode.insertBefore(novaLinha, linha.nextSibling);
+        }
+        else if (acao === "removeRow") {
+            if (linhas.length <= 1)
+                tabela.parentNode.removeChild(tabela);
+            else
+                linha.parentNode.removeChild(linha);
+        }
+        else if (acao === "addCol") {
+            for (let i = 0; i < linhas.length; i++) {
+                const ref = linhas[i].cells[indice];
+                const tag = ref && ref.tagName === "TH" ? "th" : "td";
+                const novaCelula = nova(tag);
+                if (ref)
+                    linhas[i].insertBefore(novaCelula, ref.nextSibling);
+                else
+                    linhas[i].appendChild(novaCelula);
+            }
+        }
+        else if (acao === "removeCol") {
+            if (linha.cells.length <= 1)
+                tabela.parentNode.removeChild(tabela);
+            else {
+                for (let i = 0; i < linhas.length; i++) {
+                    const ref = linhas[i].cells[indice];
+                    if (ref)
+                        linhas[i].removeChild(ref);
+                }
+            }
+        }
+        else if (acao === "removeTable") {
+            tabela.parentNode.removeChild(tabela);
+        }
+        celulaRef.current = null;
+        setInTable(false);
+        handleInput();
+        if (editorRef.current)
+            editorRef.current.focus();
+    }
+    function fontFamilyOptions() {
+        return [
+            {
+                label: rotulo("fontFamilyBase"),
+                value: "var(--umds-semantic-font-family-base)",
+            },
+            {
+                label: rotulo("fontFamilyMono"),
+                value: "var(--umds-semantic-font-family-mono)",
+            },
+        ];
+    }
+    function fontSizeOptions() {
+        return [
+            {
+                label: "12",
+                value: "var(--umds-primitive-font-size-xxxs)",
+            },
+            {
+                label: "14",
+                value: "var(--umds-primitive-font-size-xxs)",
+            },
+            {
+                label: "16",
+                value: "var(--umds-primitive-font-size-xs)",
+            },
+            {
+                label: "20",
+                value: "var(--umds-primitive-font-size-sm)",
+            },
+            {
+                label: "24",
+                value: "var(--umds-primitive-font-size-md)",
+            },
+        ];
+    }
+    function abrirEstilo(qual) {
+        if (!isEditable() || typeof window === "undefined")
+            return;
+        guardarSelecao();
+        setStyleError(false);
+        setLinkOpen(false);
+        setImageOpen(false);
+        setTableOpen(false);
+        setStyleOpen(qual);
+        focoPendenteRef.current = "style";
+    }
+    function fecharEstilo() {
+        setStyleOpen("");
+        setStyleError(false);
+        focoPendenteRef.current = "editor";
+    }
+    function aplicarEstilo(propriedade, valor) {
+        if (typeof document === "undefined" || typeof window === "undefined")
+            return;
+        const declaracao = estiloDeTexto(propriedade, valor);
+        if (!declaracao)
+            return;
+        restaurarSelecao();
+        const selecao = window.getSelection();
+        if (!selecao || selecao.rangeCount === 0 || selecao.isCollapsed) {
+            setStyleError(true);
+            return;
+        }
+        const molde = document.createElement("div");
+        molde.appendChild(selecao.getRangeAt(0).cloneContents());
+        document.execCommand("insertHTML", false, '<span style="' + declaracao + '">' + molde.innerHTML + "</span>");
+        setStyleOpen("");
+        setStyleError(false);
+        focoPendenteRef.current = "editor";
+        handleInput();
+    }
+    function aplicarCor(token) {
+        if (!token || token.indexOf("--") !== 0)
+            return;
+        aplicarEstilo("color", "var(" + token + ")");
+    }
+    function handleStyleKeyDown(event) {
+        if (!event || event.key !== "Escape")
+            return;
+        // O Select aberto já tratou o Esc (fechou a lista e deu preventDefault): o painel fica para o próximo.
+        if (event.defaultPrevented)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        fecharEstilo();
+    }
+    function styleErrorText() {
+        return styleError ? rotulo("styleNeedsSelection") : undefined;
+    }
+    function stylePanelLabel() {
+        return styleOpen ? rotulo(styleOpen) : "";
+    }
+    function linkErrorText() {
+        return linkError ? rotulo("linkInvalid") : undefined;
+    }
+    function linkRemoveVisible() {
+        return linkUrl !== "";
+    }
+    useEffect(() => {
+        setUid(gerarId("umds-rte"));
+        const inicial = props.value !== undefined ? props.value : props.defaultValue || "";
+        escreverHtml(inicial);
+        ultimoEmitidoRef.current = htmlVazio(inicial)
+            ? ""
+            : editorRef.current
+                ? editorRef.current.innerHTML
+                : "";
+        if (typeof document !== "undefined") {
+            const aoMudarSelecao = () => lerEstados();
+            document.addEventListener("selectionchange", aoMudarSelecao);
+            observadorRef.current = () => document.removeEventListener("selectionchange", aoMudarSelecao);
+        }
+    }, []);
+    useEffect(() => {
+        // `value` de fora diferente do que a área tem: reescreve (reset do formulário, valor vindo do servidor).
+        if (props.value !== undefined &&
+            editorRef.current &&
+            props.value !== ultimoEmitidoRef.current) {
+            const limpo = sanitizarHtml(props.value);
+            if (editorRef.current.innerHTML !== limpo &&
+                !(htmlVazio(limpo) && htmlVazio(editorRef.current.innerHTML))) {
+                editorRef.current.innerHTML = limpo;
+            }
+            ultimoEmitidoRef.current = props.value;
+        }
+        if (focoPendenteRef.current) {
+            const alvo = focoPendenteRef.current;
+            focoPendenteRef.current = "";
+            if (alvo === "editor" && editorRef.current) {
+                restaurarSelecao();
+            }
+            else if (alvo === "link" && linkInputWrapRef.current) {
+                const campo = linkInputWrapRef.current.querySelector("input");
+                if (campo)
+                    campo.focus();
+            }
+            else if (alvo === "image" && imageInputWrapRef.current) {
+                const campo = imageInputWrapRef.current.querySelector("input");
+                if (campo)
+                    campo.focus();
+            }
+            else if (alvo === "table" && tableInputWrapRef.current) {
+                const campo = tableInputWrapRef.current.querySelector("input");
+                if (campo)
+                    campo.focus();
+            }
+            else if (alvo === "style" && styleWrapRef.current) {
+                const campo = styleWrapRef.current.querySelector('[role="combobox"], [role="radio"], button');
+                if (campo)
+                    campo.focus();
+            }
+        }
+    });
+    useEffect(() => {
+        return () => {
+            if (observadorRef.current) {
+                observadorRef.current();
+                observadorRef.current = null;
+            }
+        };
+    }, []);
+    return (_jsxs("div", { className: classes(), children: [props.label ? (_jsx("span", { className: "umds-rte__label", id: labelId(), children: props.label })) : null, _jsxs("div", { className: "umds-rte__frame", children: [showToolbar() ? (_jsx("div", { role: "toolbar", className: "umds-rte__toolbar", ref: toolbarRef, "aria-label": toolbarName(), "aria-controls": editorId(), onKeyDown: (event) => handleToolbarKeyDown(event), children: tools()?.map((ferramenta) => (_jsxs(React.Fragment, { children: [ferramenta.separator ? (_jsx("span", { role: "separator", "aria-orientation": "vertical", className: "umds-rte__separator" })) : null, !ferramenta.separator ? (_jsx("button", { type: "button", "aria-label": ferramenta.label, title: ferramenta.label, "aria-pressed": pressedText(ferramenta), tabIndex: toolTabIndex(ferramenta), disabled: !isEditable(), onMouseDown: (event) => handleToolMouseDown(event), onClick: (event) => handleToolClick(ferramenta), onFocus: (event) => handleToolFocus(ferramenta), className: toolClasses(ferramenta), children: _jsx(Icon, { size: "sm", variant: "inherit", icon: ferramenta.icon }) })) : null] }, ferramenta.key))) })) : null, linkOpen ? (_jsxs("form", { className: "umds-rte__link", noValidate: true, onSubmit: (event) => handleLinkSubmit(event), onKeyDown: (event) => handleLinkKeyDown(event), children: [_jsx("div", { className: "umds-rte__link-field", ref: linkInputWrapRef, children: _jsx(Input, { size: "sm", type: "url", placeholder: "https://", label: rotulo("linkAddress"), value: linkUrl, errorMessage: linkErrorText(), onChange: (texto) => handleLinkInput(texto) }) }), _jsxs("div", { className: "umds-rte__link-actions", children: [_jsx(Button, { variant: "primary", size: "sm", type: "submit", children: rotulo("linkApply") }), linkRemoveVisible() ? (_jsx(Button, { variant: "secondary", size: "sm", onClick: (event) => removerLink(), children: rotulo("linkRemove") })) : null, _jsx(Button, { variant: "text", size: "sm", onClick: (event) => fecharLink(), children: rotulo("linkCancel") })] })] })) : null, imageOpen ? (_jsxs("form", { className: "umds-rte__link", noValidate: true, onSubmit: (event) => handleImageSubmit(event), onKeyDown: (event) => handlePanelKeyDown(event), children: [_jsx("div", { className: "umds-rte__link-field", ref: imageInputWrapRef, children: _jsx(Input, { size: "sm", type: "url", placeholder: "https://", label: rotulo("imageUrl"), value: imgUrl, errorMessage: imageErrorText(), onChange: (texto) => handleImageUrl(texto) }) }), _jsx("div", { className: "umds-rte__link-field", children: _jsx(Input, { size: "sm", label: rotulo("imageAlt"), value: imgAlt, onChange: (texto) => handleImageAlt(texto) }) }), _jsxs("div", { className: "umds-rte__link-actions", children: [_jsx(Button, { variant: "secondary", size: "sm", onClick: (event) => escolherArquivo(), children: rotulo("imageFile") }), _jsx("input", { type: "file", accept: "image/png,image/jpeg,image/gif,image/webp", ref: fileInputRef, hidden: true, onChange: (event) => handleArquivo(event) }), imgFileName ? (_jsx(Text, { as: "span", variant: "caption", color: "secondary", children: imgFileName })) : null, _jsx(Button, { variant: "primary", size: "sm", type: "submit", children: rotulo("imageApply") }), _jsx(Button, { variant: "text", size: "sm", onClick: (event) => fecharImagem(), children: rotulo("imageCancel") })] })] })) : null, tableOpen ? (_jsxs("form", { className: "umds-rte__link", noValidate: true, onSubmit: (event) => handleTableSubmit(event), onKeyDown: (event) => handlePanelKeyDown(event), children: [_jsx("div", { className: "umds-rte__table-field", ref: tableInputWrapRef, children: _jsx(Input, { size: "sm", type: "number", label: rotulo("tableRows"), value: tblRows, errorMessage: tableErrorText(), onChange: (texto) => handleTableRows(texto) }) }), _jsx("div", { className: "umds-rte__table-field", children: _jsx(Input, { size: "sm", type: "number", label: rotulo("tableCols"), value: tblCols, onChange: (texto) => handleTableCols(texto) }) }), _jsxs("div", { className: "umds-rte__link-actions", children: [_jsx(Button, { variant: "primary", size: "sm", type: "submit", children: rotulo("tableApply") }), _jsx(Button, { variant: "text", size: "sm", onClick: (event) => fecharTabela(), children: rotulo("tableCancel") })] })] })) : null, styleOpen !== "" ? (_jsxs("div", { role: "group", className: "umds-rte__link", "aria-label": stylePanelLabel(), onKeyDown: (event) => handleStyleKeyDown(event), children: [_jsxs("div", { className: "umds-rte__style-field", ref: styleWrapRef, children: [styleOpen === "fontFamily" ? (_jsx(Select, { size: "sm", ariaLabel: rotulo("fontFamily"), placeholder: rotulo("fontFamily"), options: fontFamilyOptions(), onChange: (valor) => aplicarEstilo("font-family", String(valor)) })) : null, styleOpen === "fontSize" ? (_jsx(Select, { size: "sm", ariaLabel: rotulo("fontSize"), placeholder: rotulo("fontSize"), options: fontSizeOptions(), onChange: (valor) => aplicarEstilo("font-size", String(valor)) })) : null, styleOpen === "textColor" ? (_jsx(ColorPicker, { size: "xs", ariaLabel: rotulo("textColor"), onChange: (token) => aplicarCor(token) })) : null] }), _jsx("div", { className: "umds-rte__link-actions", children: _jsx(Button, { variant: "text", size: "sm", onClick: (event) => fecharEstilo(), children: rotulo("styleClose") }) }), styleErrorText() ? (_jsx(Text, { as: "span", variant: "caption", color: "negative", role: "alert", children: styleErrorText() })) : null] })) : null, tableBarVisible() ? (_jsxs("div", { role: "group", className: "umds-rte__table-bar", "aria-label": rotulo("tableActions"), children: [_jsx(Button, { variant: "text", size: "sm", onClick: (event) => handleTableAction("addRow"), children: rotulo("tableAddRow") }), _jsx(Button, { variant: "text", size: "sm", onClick: (event) => handleTableAction("removeRow"), children: rotulo("tableRemoveRow") }), _jsx(Button, { variant: "text", size: "sm", onClick: (event) => handleTableAction("addCol"), children: rotulo("tableAddCol") }), _jsx(Button, { variant: "text", size: "sm", onClick: (event) => handleTableAction("removeCol"), children: rotulo("tableRemoveCol") }), _jsx(Button, { variant: "text", size: "sm", onClick: (event) => handleTableAction("removeTable"), children: rotulo("tableRemove") })] })) : null, _jsx("div", { role: "textbox", "aria-multiline": "true", className: "umds-rte__editor", ref: editorRef, id: editorId(), "aria-label": editorAriaLabel(), "aria-labelledby": labelId(), "aria-describedby": describedBy(), "aria-invalid": isInvalid() ? "true" : undefined, "aria-readonly": props.readOnly ? "true" : undefined, "aria-disabled": props.disabled ? "true" : undefined, "aria-placeholder": props.placeholder, "data-placeholder": props.placeholder, contentEditable: editableText(), tabIndex: props.disabled ? -1 : 0, style: editorStyle(), onInput: (event) => handleInput(), onPaste: (event) => handlePaste(event), onKeyDown: (event) => handleEditorKeyDown(event), onBlur: (event) => handleBlur(event) }), props.footer ? (_jsx("div", { className: "umds-rte__footer", children: _jsx(_Fragment, { children: props.footer }) })) : null] }), props.errorMessage ? (_jsx(Text, { as: "span", variant: "caption", color: "negative", id: errorId(), children: props.errorMessage })) : null, props.helperText ? (_jsx(Text, { as: "span", variant: "caption", color: "secondary", id: helperId(), children: props.helperText })) : null] }));
+}
+export default RichTextEditor;