Editor

1.1.0

El Editor es un patrón de interfaz que permite a los usuarios crear o modificar contenido textual. Su objetivo es ofrecer una experiencia clara, eficiente y flexible para tareas que requieren edición o carga de gran cantidad de contenido textual o 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.

Implementación

Instalá el componente via terminal.

npm install @nimbus-ds/editor

Editor

Cuándo usar

Usar el Editor cuando necesites:

Crear o editar contenido estructurado (productos, descripciones, configuraciones).
Gestionar bloques editables.
Ofrecer una experiencia de edición modular (por secciones o pasos).

Cuándo no usar

No se recomienda usar el Editor en los siguientes casos:

Flujos muy simples que requieren solo un campo (usar input).
Ediciones rápidas directamente desde listas o paneles (usar edición inline).

Criterios de productividad y usabilidad

Enfoque automático en el campo principal: reduce el tiempo para comenzar a escribir.
Navegación fluida con teclado: todos los controles deben ser accesibles con Tab/Enter.
Feedback inmediato: validaciones en tiempo real, loading y toasts al guardar.
Persistencia de contexto: conservar estado de edicion o carga entre sesiones o navegación.
Evitar confirmaciones innecesarias: mostrar feedback inline o toast, no usar modals.

Accesibilidad

Soporte completo para navegación con teclado (Tab, Shift+Tab, Enter).
Uso de roles ARIA para bloques editables.
Etiquetas claras y visibles (label for, aria-label).
Mensajes de error accesibles para lectores de pantalla.
Áreas táctiles adecuadas en dispositivos mobiles (mínimo 44x44px).
No depender del color como único indicador de estado.

Anatomía

El Editor puede incluir:

Tool bar con funciones,
Funciones (agregar link, formato de lista, tipografia bold, etc)
Campo editable (textarea)
Validaciones (toast)
Help text
Modal

Dependencias

Textarea
Card
Toast
Tooltip
Modal
Icon

Do and Don'ts

✅ Do

Usar placeholder y ejemplos de carga de contenido concretos.
Proveer feedback inmediato tras guardar.
Mostar limites de caracteres si el caso amerita.
Permitir la carga y edición de links sobre el contenido cargado.

❌ Don't

No esconder validaciones o errores.
No resetear carga de contenido sin advertencia.
No usar múltiples niveles de confirmación sin necesidad.

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