Empezar

El editor funciona controlado o no, con el documento en JSON o en HTML. El JSON es lo que conviene guardar: no pierde nada. RichTextView pinta el mismo documento sin cargar el editor.

import { RichTextEditor, RichTextView } from '@amset/ui/rich-text' export function Notes({ html, onChange }: { html: string; onChange: (html: string) => void }) {  return <RichTextEditor label="Notes" format="html" defaultValue={html} onChange={onChange} rows={8} />} // Solo lectura, sin cargar el editor (también en el servidor)export function Preview({ html }: { html: string }) {  return <RichTextView format="html" value={html} />}

Formatos

Cada conversor se importa solo si lo usas; el editor no carga ninguno.

• HTML: toHtml y fromHtml. Todo lo que el editor sabe hacer sale como HTML válido y se lee de vuelta.
• Markdown: toMarkdown y fromMarkdown (CommonMark, más las tablas, tareas y tachado de GFM). Lo que Markdown no sabe decir (subrayado, color, alineación, celdas combinadas) se escribe como HTML dentro del Markdown, así que el documento sobrevive al viaje de ida y vuelta. Las fórmulas se guardan entre $$. Una prueba lo comprueba con 1500 documentos aleatorios.
• Word: toDocx y fromDocx generan y leen ficheros .docx con títulos, listas anidadas, tablas con celdas combinadas, enlaces, imágenes y menciones. Las sugerencias salen como cambios con control de cambios y los comentarios como comentarios de Word, y se leen de vuelta. Las columnas salen en una sola y las fórmulas como el TeX, en estilo de código.
• Código React: toTsx convierte el documento en un componente de React que importa de @amset/ui.

import { toMarkdown, fromMarkdown, toDocx } from '@amset/ui/rich-text' const markdown = toMarkdown(doc)const back = fromMarkdown(markdown)const bytes = await toDocx(doc)

Bloques propios

Un bloque es una pieza tuya (una tarjeta de producto, una gráfica, un formulario) dentro del texto. El documento guarda solo su tipo y unos datos JSON con límites de tamaño y profundidad; lo que se ve lo decide tu render, que se usa igual en el editor, en RichTextView y en el servidor. Un bloque que nadie sabe pintar se conserva tal cual, no se pierde.

const blocks = {  'product-card': {    label: 'Product card',    defaultProps: { name: 'Product', price: '0 €' },    render: (props) => <ProductCard {...props} />,  },} <RichTextEditor label="Page" blocks={blocks} />

import { RichTextEditor, createLanguageToolSpellchecker, diffDocuments } from '@amset/ui/rich-text' <RichTextEditor  label="Contract"  spellchecker={createLanguageToolSpellchecker({ url: '/api/spellcheck', language: 'en' })}  review={{ author: 'Ana', threads, onThreadsChange: setThreads, suggesting, onSuggestingChange: setSuggesting }}  versions={{ versions, load: loadVersion, onSave: saveVersion, onRestore: restoreVersion }}/> // The same comparison outside the editorconst changes = diffDocuments(before, after)

La edición simultánea en tiempo real, con varias personas escribiendo a la vez y sus cursores a la vista, no está todavía. Necesita un servidor de sincronización y credenciales por usuario, y llegará más adelante. Mientras tanto, los comentarios, las sugerencias y las versiones funcionan sobre un documento que se guarda y se vuelve a abrir.

import { RichTextEditor, amsetBlocks } from '@amset/ui/rich-text' const blocks = amsetBlocks({  actions: { save: { label: 'Save draft', run: () => saveDraft() } },  data: { sales: { label: 'Monthly sales', value: sales } },}) <RichTextEditor label="Report" blocks={blocks} />

{  "type": "component",  "kind": "amset-card",  "props": { "title": "Summary" },  "content": [{ "type": "paragraph", "inline": [{ "type": "text", "text": "Quarter figures", "marks": [] }] }]}

Un visor de HTML seguro

HtmlViewer pinta HTML que no controlas: una plantilla de correo, el cuerpo de un mensaje, el HTML que devuelve un modelo.

import { HtmlViewer } from '@amset/ui/rich-text' <HtmlViewer html={untrustedHtml} images="https" onReport={(report) => log(report)} /> // El diseño del autor, aislado en un iframe<HtmlViewer html={newsletter} mode="page" images="https" />

A código y a agentes

toTsx(doc) devuelve el código de un componente de React con los componentes de la biblioteca, las acciones como actions.save y los datos como data.sales, más una lista de avisos de lo que no se pudo llevar tal cual. Para un asistente, listComponents(), describeComponent(kind) y createComponent(kind, props) dan el catálogo, la ficha de un componente y un bloque ya validado, con los errores explicados en vez de un bloque roto.

import { toTsx, listComponents, createComponent } from '@amset/ui/rich-text' const { code, warnings } = toTsx(doc, { componentName: 'Report' }) listComponents()                       // the catalogueawait createComponent('amset-stat', { label: 'Orders', value: '342' })

Seguridad

• Lo que se pega, se importa y se carga pasa por listas de lo permitido; nada de lo no listado llega al documento.
• El documento nunca contiene funciones, scripts ni estilos arbitrarios. Los bloques propios y los de la biblioteca se validan contra su esquema y con límites de tamaño.
• Los enlaces aceptan http, https, mailto, tel y rutas relativas; las imágenes, http, https y rutas propias, nunca data:.
• El visor de HTML se prueba con más de 50 vectores de ataque y 600 documentos mutados al azar.

Accesibilidad y peso

El campo es un role="textbox" con su etiqueta, la barra de herramientas se maneja con teclado, los cambios importantes se anuncian y cada historia pasa axe. El editor completo pesa unos 99 KB comprimidos y RichTextView, que solo lee, unos 21 KB. Los paneles de revisión y de versiones, el conversor de fórmulas, los componentes de AMSET UI y los conversores a Markdown o Word se cargan solo si se usan.

Seguir leyendo

• Probarlo en el banco de pruebas
• IA y editor de texto