Editor

1.1.0

O **Editor** é um padrão de interface que permite aos usuários criar ou modificar conteúdo textual. Seu objetivo é oferecer uma experiência clara, eficiente e flexível para tarefas que requerem edição ou carregamento de grande quantidade de conteúdo textual ou entradas de texto enriquecido.

Default

import React from "react";
import dynamic from "next/dynamic";

const Editor = dynamic(() => import("@nimbus-ds/editor"), { ssr: false });

const Example: React.FC = () => {
  return <Editor />;
};

export default Editor = dynamic(() => import("@nimbus-ds/editor"), { ssr;

Refer to the Lexical API documentation to understand how to implement the <Editor> component.

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/editor

Editor

Quando usar

Usar o Editor quando precisar:

Criar ou editar conteúdo estruturado (produtos, descrições, configurações).
Gerenciar blocos editáveis.
Oferecer uma experiência de edição modular (por seções ou passos).

Quando não usar

Não se recomenda usar o Editor nos seguintes casos:

Fluxos muito simples que requerem apenas um campo (usar input).
Edições rápidas diretamente de listas ou painéis (usar edição inline).

Critérios de produtividade e usabilidade

Foco automático no campo principal: reduz o tempo para começar a escrever.
Navegação fluida com teclado: todos os controles devem ser acessíveis com Tab/Enter.
Feedback imediato: validações em tempo real, loading e toasts ao salvar.
Persistência de contexto: conservar estado de edição ou carregamento entre sessões ou navegação.
Evitar confirmações desnecessárias: mostrar feedback inline ou toast, não usar modais.

Acessibilidade

Suporte completo para navegação com teclado (Tab, Shift+Tab, Enter).
Uso de roles ARIA para blocos editáveis.
Etiquetas claras e visíveis (label for, aria-label).
Mensagens de erro acessíveis para leitores de tela.
Áreas táteis adequadas em dispositivos móveis (mínimo 44x44px).
Não depender da cor como único indicador de estado.

Anatomia

O Editor pode incluir:

Tool bar com funções,
Funções (adicionar link, formato de lista, tipografia bold, etc)
Campo editável (textarea)
Validações (toast)
Help text
Modal

Dependências

Textarea
Card
Toast
Tooltip
Modal
Icon

Do and Don'ts

✅ Do

Usar placeholder e exemplos de carregamento de conteúdo concretos.
Fornecer feedback imediato após salvar.
Mostrar limites de caracteres se o caso ameritar.
Permitir o carregamento e edição de links sobre o conteúdo carregado.

❌ Don't

Não esconder validações ou erros.
Não resetar carregamento de conteúdo sem advertência.
Não usar múltiplos níveis de confirmação sem necessidade.

Props

Additional props are passed to the <Editor> element. See div docs for a list of props accepted by the <Editor> element.

Editor

Name	Type	Default	Description
modules	'bold' 'clearFormating' 'divider' 'header' 'history' 'italic' 'link' 'orderedList' 'unorderedList' 'video'
placeholder	string
value	string
parser	'html' 'json'
theme	object
onChange	object
helpIcon	React.FC<IconProps>		Icon supporting the help text message.
helpText	string		Help text displaying optional hints or validation messages under the field.
appearance	'danger' 'none' 'success' 'warning'	'none'	Appearance of the field and help text elements.
translations	object