@1doc/1ds-react 2.9.0 → 2.10.0

package/dist/components/RichTextEditor/RichTextEditor.css

@@ -142,6 +142,27 @@
   gap: var(--umds-primitive-spacing-nano); /* 8px */
 }
 
+.umds-rte__table-field {
+  flex: 0 1 var(--umds-primitive-spacing-xxxl); /* 120px */
+  min-width: 0;
+}
+
+.umds-rte__style-field {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+/* Barra de linha e coluna: aparece com o cursor numa célula. */
+.umds-rte__table-bar {
+  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);
+}
+
 /* ── Área de escrita ── */
 .umds-rte__editor {
   box-sizing: border-box;
@@ -183,6 +204,32 @@
   color: var(--umds-semantic-color-neutral-dark-down);
 }
 
+.umds-rte__editor img {
+  max-width: 100%;
+  height: auto;
+}
+
+.umds-rte__editor table {
+  width: 100%;
+  margin: var(--umds-primitive-spacing-nano) 0;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.umds-rte__editor th,
+.umds-rte__editor td {
+  min-width: var(--umds-primitive-spacing-sm); /* 40px: a célula vazia continua alcançável */
+  padding: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-nano); /* 4px 8px */
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-down);
+  vertical-align: top;
+  text-align: left;
+}
+
+.umds-rte__editor th {
+  background: var(--umds-semantic-color-background-light);
+  font-weight: var(--umds-primitive-font-weight-semibold);
+}
+
 .umds-rte__editor a {
   color: var(--umds-semantic-color-primary-pure);
   text-decoration: underline;

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

@@ -1,6 +1,6 @@
 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" | "|";
+export type RichTextTool = "bold" | "italic" | "underline" | "strike" | "ul" | "ol" | "link" | "undo" | "redo" | "clear" | "alignLeft" | "alignCenter" | "alignRight" | "alignJustify" | "image" | "table" | "fontFamily" | "fontSize" | "textColor" | "|";
 /**
  * RichTextEditor — editor de texto rico leve, sobre `contenteditable`, sem
  * biblioteca: negrito, itálico, sublinhado, tachado, listas, link, desfazer e
@@ -27,19 +27,33 @@ export type RichTextTool = "bold" | "italic" | "underline" | "strike" | "ul" | "
  *
  * 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.
+ * Opcionais na `toolbar` (fora da barra padrão): alinhamento (`alignLeft`,
+ * `alignCenter`, `alignRight`, `alignJustify`), imagem (`image`: por endereço ou por
+ * arquivo, que entra como `data:` URL, com texto alternativo) e tabela simples
+ * (`table`: insere linhas × colunas; com o cursor numa célula aparece a barra de
+ * adicionar e remover linha e coluna). Imagem e tabela passam pela mesma
+ * higienização: só PNG, JPEG, GIF e WebP em `data:`, ou `http(s)`; sem SVG.
+ *
+ * Estilo de texto por TOKEN do DS, também opcional na `toolbar`: `fontFamily`
+ * (padrão ou monoespaçada), `fontSize` (12, 14, 16, 20 e 24px, da escala do DS) e
+ * `textColor` (a paleta do DS). Cada um abre um painel abaixo da barra e aplica ao
+ * texto selecionado (sem seleção, o painel pede que se selecione). O valor guarda
+ * `<span style="color: var(--umds-primitive-red-pure)">`: só token do DS passa na
+ * higienização, cor em hex, rgb ou nome sai. Para voltar ao padrão, use `clear`.
+ *
+ * Limites: usa `document.execCommand`, que o
+ * navegador mantém mas está marcado como obsoleto (o comportamento do desfazer
+ * varia um pouco entre navegadores; adicionar e remover linha ou coluna mexe no
+ * DOM e não entra no desfazer). Imagem de arquivo passa de 2 MB? Recusada: o HTML
+ * do valor guarda a imagem inteira.
  * @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[]} toolbar - Ferramentas da barra, em ordem: 'bold' | 'italic' | 'underline' | 'strike' | 'ul' | 'ol' | 'link' | 'undo' | 'redo' | 'clear' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'image' | 'table' | 'fontFamily' | 'fontSize' | 'textColor' | '|' (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 {object} labels - Nomes das ferramentas e dos campos, parcial: `{ bold, italic, underline, strike, ul, ol, link, undo, redo, clear, alignLeft, alignCenter, alignRight, alignJustify, image, table, linkAddress, linkApply, linkRemove, linkCancel, linkInvalid, imageUrl, imageAlt, imageFile, imageApply, imageCancel, imageInvalid, imageType, imageTooLarge, tableRows, tableCols, tableApply, tableCancel, tableInvalid, tableActions, tableAddRow, tableRemoveRow, tableAddCol, tableRemoveCol, tableRemove, fontFamily, fontSize, textColor, fontFamilyBase, fontFamilyMono, styleClose, styleNeedsSelection }`
  * @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