@1doc/1ds-react 2.7.2 → 2.9.0

package/dist/components/RichTextEditor/RichTextEditor.css

@@ -0,0 +1,203 @@
+/* ─────────────────────────────────────────────
+   RICH TEXT EDITOR
+   Editor de texto rico leve sobre contenteditable.
+
+   A moldura (borda, raio, foco, erro) segue a família de campos. A barra é uma
+   faixa de fundo claro com botões de 32px: o botão LIGADO (negrito, lista...)
+   ganha o fundo e a cor do primário, e a mesma informação sai em `aria-pressed`.
+
+   Cores: semânticos · Medidas: primitivos
+───────────────────────────────────────────── */
+
+.umds-rte {
+  display: flex;
+  flex-direction: column;
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+  font-family: var(--umds-semantic-font-family-base);
+}
+
+.umds-rte__label {
+  font-size: var(--umds-semantic-field-label-size);
+  font-weight: var(--umds-semantic-field-label-weight);
+  color: var(--umds-semantic-field-label-color);
+}
+
+.umds-rte__frame {
+  display: flex;
+  flex-direction: column;
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-field-border-default);
+  border-radius: var(--umds-primitive-border-radius-sm);
+  background: var(--umds-semantic-color-background-white);
+  overflow: hidden;
+  transition:
+    border-color var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard),
+    box-shadow var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard);
+}
+
+.umds-rte__frame:hover {
+  border-color: var(--umds-semantic-field-border-hover);
+}
+
+.umds-rte__frame:focus-within {
+  border-color: var(--umds-semantic-field-border-focus);
+  box-shadow: var(--umds-semantic-field-ring-focus);
+}
+
+.umds-rte--invalid .umds-rte__frame,
+.umds-rte--invalid .umds-rte__frame:hover {
+  border-color: var(--umds-semantic-field-border-error);
+}
+
+.umds-rte--invalid .umds-rte__frame:focus-within {
+  box-shadow: var(--umds-semantic-field-ring-error);
+}
+
+.umds-rte--disabled .umds-rte__frame {
+  background: var(--umds-semantic-field-disabled-background);
+  opacity: var(--umds-semantic-field-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.umds-rte--readonly .umds-rte__frame {
+  background: var(--umds-semantic-field-readonly-background);
+}
+
+/* ── Barra ── */
+.umds-rte__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+  padding: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-nano); /* 4px 8px */
+  background: var(--umds-semantic-color-background-light);
+  border-bottom: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+}
+
+.umds-rte__tool {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--umds-primitive-spacing-xs); /* 32px */
+  height: var(--umds-primitive-spacing-xs);
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: var(--umds-primitive-border-radius-sm);
+  background: transparent;
+  color: var(--umds-semantic-color-neutral-dark-down);
+  cursor: pointer;
+  transition:
+    background-color var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard),
+    color var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard);
+}
+
+.umds-rte__tool:hover:not(:disabled) {
+  background: var(--umds-semantic-color-neutral-light-medium);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+.umds-rte__tool--active,
+.umds-rte__tool--active:hover:not(:disabled) {
+  background: var(--umds-semantic-color-primary-light);
+  color: var(--umds-semantic-color-primary-dark);
+}
+
+.umds-rte__tool:focus-visible {
+  outline: var(--umds-primitive-border-width-thin) solid var(--umds-semantic-color-primary-pure);
+  outline-offset: calc(var(--umds-primitive-border-width-thin) * -1);
+}
+
+.umds-rte__tool:disabled {
+  cursor: not-allowed;
+  opacity: var(--umds-semantic-field-disabled-opacity);
+}
+
+.umds-rte__separator {
+  align-self: stretch;
+  width: var(--umds-primitive-border-width-hairline);
+  margin: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-micro);
+  background: var(--umds-semantic-color-neutral-light-down);
+}
+
+/* ── Campo de link, logo abaixo da barra ── */
+.umds-rte__link {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--umds-primitive-spacing-nano); /* 8px */
+  padding: var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-mini); /* 8px 12px */
+  background: var(--umds-semantic-color-background-light);
+  border-bottom: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+}
+
+.umds-rte__link-field {
+  flex: 1 1 var(--umds-primitive-spacing-giant);
+  min-width: 0;
+}
+
+.umds-rte__link-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--umds-primitive-spacing-nano); /* 8px */
+}
+
+/* ── Área de escrita ── */
+.umds-rte__editor {
+  box-sizing: border-box;
+  min-height: var(--umds-primitive-spacing-xxxl); /* 120px */
+  padding: var(--umds-primitive-spacing-mini) var(--umds-primitive-spacing-xxxs); /* 12px 16px */
+  font-size: var(--umds-semantic-field-text-size); /* 14px */
+  line-height: var(--umds-primitive-font-line-height-lg);
+  color: var(--umds-semantic-field-text-color);
+  outline: none;
+  overflow-wrap: anywhere;
+  overflow-y: auto;
+}
+
+.umds-rte--resizable .umds-rte__editor {
+  resize: vertical;
+}
+
+/* Placeholder: o :empty some assim que há conteúdo (o JS limpa o <br> que sobra). */
+.umds-rte__editor:empty::before {
+  content: attr(data-placeholder);
+  color: var(--umds-semantic-field-placeholder-color);
+  pointer-events: none;
+}
+
+.umds-rte__editor ul,
+.umds-rte__editor ol {
+  margin: var(--umds-primitive-spacing-quarck) 0;
+  padding-left: var(--umds-primitive-spacing-xxs); /* 24px */
+}
+
+.umds-rte__editor p,
+.umds-rte__editor blockquote {
+  margin: 0 0 var(--umds-primitive-spacing-nano);
+}
+
+.umds-rte__editor blockquote {
+  padding-left: var(--umds-primitive-spacing-mini);
+  border-left: var(--umds-primitive-border-width-thin) solid var(--umds-semantic-color-neutral-light-down);
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
+.umds-rte__editor a {
+  color: var(--umds-semantic-color-primary-pure);
+  text-decoration: underline;
+}
+
+.umds-rte__footer {
+  padding: var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-xxxs); /* 8px 16px */
+  border-top: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+  background: var(--umds-semantic-color-background-light);
+  font-size: var(--umds-primitive-font-size-xxs); /* 14px */
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
+@media (forced-colors: active) {
+  .umds-rte__tool--active {
+    outline: var(--umds-primitive-border-width-thin) solid Highlight;
+  }
+}

package/dist/components/RichTextEditor/RichTextEditor.d.ts

@@ -0,0 +1,83 @@
+import './RichTextEditor.css';
+/** Ferramentas da barra, na ordem em que aparecem em `toolbar`. `"|"` é um separador. */
+export type RichTextTool = "bold" | "italic" | "underline" | "strike" | "ul" | "ol" | "link" | "undo" | "redo" | "clear" | "|";
+/**
+ * RichTextEditor — editor de texto rico leve, sobre `contenteditable`, sem
+ * biblioteca: negrito, itálico, sublinhado, tachado, listas, link, desfazer e
+ * refazer, e limpar formatação.
+ *
+ * O valor é HTML (`value`/`defaultValue`/`onChange`) e SEMPRE passa por uma
+ * higienização: só ficam negrito, itálico, sublinhado, tachado, listas,
+ * parágrafos, quebras, títulos, citação e link; o resto (`script`, `style`,
+ * `onerror`, `class`, `javascript:`) sai, tanto do `value` que entra quanto do
+ * que se cola (colar entra como texto puro). Link só aceita `http(s)`, `mailto`,
+ * `tel`, caminho e âncora.
+ *
+ * A barra é um `role="toolbar"` com Tab numa parada só e setas entre as
+ * ferramentas; negrito, itálico, sublinhado, tachado e as listas são botões de
+ * liga/desliga (`aria-pressed`) que seguem a posição do cursor. Os atalhos do
+ * navegador (Ctrl+B, Ctrl+I, Ctrl+U, Ctrl+Z) valem, e Ctrl+K abre o link. O
+ * botão de link abre um campo logo abaixo da barra (endereço, aplicar, remover,
+ * cancelar), sem modal.
+ *
+ * A barra se escolhe por `toolbar`: a completa é o padrão; `["bold", "italic",
+ * "underline", "ul", "ol", "link"]` é a compacta; `["bold", "italic"]`, a mínima.
+ * O rodapé aceita o slot `footer` (a assinatura do autor, por exemplo) e a área
+ * pode ser redimensionável (`resizable`).
+ *
+ * Todos os textos são props (`labels`, `toolbarLabel`, `placeholder`).
+ *
+ * Limites do primeiro corte: sem tabela, imagem, cor, fonte, tamanho nem
+ * alinhamento; usa `document.execCommand`, que o navegador mantém mas está
+ * marcado como obsoleto (o comportamento do desfazer varia um pouco entre
+ * navegadores). Nada disso é preciso para o que as telas de despacho, resposta e
+ * descrição pedem.
+ * @property {string} value - HTML (controlado)
+ * @property {string} defaultValue - HTML inicial (não controlado)
+ * @property {string} label - Rótulo visível do campo
+ * @property {string} ariaLabel - Nome acessível quando não há `label` visível
+ * @property {string} placeholder - Texto de apoio com o editor vazio
+ * @property {string[]} toolbar - Ferramentas da barra, em ordem: 'bold' | 'italic' | 'underline' | 'strike' | 'ul' | 'ol' | 'link' | 'undo' | 'redo' | 'clear' | '|' (separador)
+ * @property {string} toolbarLabel - Nome da barra (padrão "Formatação")
+ * @property {object} labels - Nomes das ferramentas e do campo de link, parcial: `{ bold, italic, underline, strike, ul, ol, link, undo, redo, clear, linkAddress, linkApply, linkRemove, linkCancel, linkInvalid }`
+ * @property {number} minHeight - Altura mínima da área de escrita, em px (padrão 120)
+ * @property {boolean} resizable - Deixa redimensionar a altura pelo canto
+ * @property {boolean} disabled - Desabilita barra e área
+ * @property {boolean} readOnly - Só leitura: a área não edita e a barra some
+ * @property {boolean} invalid - Estado de erro
+ * @property {string} errorMessage - Mensagem de erro (liga o estado de erro)
+ * @property {string} helperText - Texto de ajuda abaixo do campo
+ * @property {string} id - Base dos ids internos; passe em SSR para os ids já saírem no HTML do servidor
+ * @property {string} className - Classes CSS adicionais
+ * @property {function} onChange - Chamado com o HTML a cada edição
+ * @property {function} onBlur - Chamado quando o foco sai da área de escrita
+ * @slot footer - Rodapé dentro da moldura, abaixo da área de escrita (assinatura).
+ * @quandoUsar Texto formatado que vira conteúdo de documento: despacho, resposta, descrição de serviço, modelo de texto.
+ * @quandoNaoUsar Para texto simples de várias linhas, use `Textarea`. Para texto de uma linha, `Input`. Quando for preciso tabela, imagem, cor ou fonte, este corte não serve: peça ao DS ou use um editor especializado.
+ */
+/** Ferramentas da barra, na ordem em que aparecem em `toolbar`. `"|"` é um separador. */
+export interface RichTextEditorProps {
+    value?: string;
+    defaultValue?: string;
+    label?: string;
+    ariaLabel?: string;
+    placeholder?: string;
+    toolbar?: RichTextTool[];
+    toolbarLabel?: string;
+    labels?: Record<string, string>;
+    minHeight?: number;
+    resizable?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    id?: string;
+    className?: string;
+    /** Slot `footer`: abaixo da área de escrita. */
+    footer?: any;
+    onChange?: (html: string) => void;
+    onBlur?: (event?: any) => void;
+}
+declare function RichTextEditor(props: RichTextEditorProps): import("react/jsx-runtime").JSX.Element;
+export default RichTextEditor;