Rich Text

El sistema de Rich Text de Cobalt provee edición de texto enriquecido basada en Tiptap v3 / ProseMirror, empaquetada como Web Components reutilizables.

Tres componentes

co-rich-text-editor

Editor completo con toolbar inline o flotante, presets, soporte de imágenes, variables, menciones y más.

shadow: false — light DOM para que ProseMirror controle el DOM editable.

co-rich-text-toolbar

Barra de herramientas que recibe el editor como propiedad. Normalmente renderizada internamente por el editor, pero puede usarse standalone.

shadow: true

co-rich-text-viewer

Visor de solo lectura. En modo html solo carga DOMPurify (~7 KB). En modo json importa lazy el serializador.

shadow: true

Paquetes

Paquete	Rol
@prolibu-suite/cobalt-rich-text	Motor aislado: createEditor, presets, serializadores, sanitizador, config de toolbar, extensiones
@prolibu-suite/cobalt-core	Web Components co-rich-text-editor, co-rich-text-toolbar, co-rich-text-viewer
@prolibu-suite/cobalt-vue	Wrappers Vue 3 (CoRichTextEditor, etc.)
@prolibu-suite/cobalt-react	Wrappers React

Tip

El paquete cobalt-rich-text pesa ~70-90 KB (Tiptap + ProseMirror). Al estar aislado, las apps que no usan el editor no pagan ese costo — se importa lazy solo cuando se monta un co-rich-text-editor o un viewer en modo json.

Arquitectura

┌─────────────────────────────────────────────────────────────┐
│  Tu app (suite-v2 / vanilla / React / Vue / iframe)         │
└────┬──────────────────┬──────────────────┬──────────────────┘
     │                  │                  │
┌────▼─────────────┐ ┌──▼──────────────┐ ┌─▼───────────────────┐
│ cobalt-vue       │ │ cobalt-react    │ │ cobalt-core         │
│ (CoRichText-     │ │ (CoRichText-    │ │ (co-rich-text-      │
│  Editor, etc.)   │ │  Editor, etc.)  │ │  editor, etc.)      │
└────┬─────────────┘ └────┬────────────┘ └─────┬───────────────┘
     │                    │                    │
     └──────────┬─────────┘                    │
                │  lazy import                 │
          ┌─────▼──────────────────────────────▼───┐
          │  @prolibu-suite/cobalt-rich-text        │
          │  createEditor · presets · serializers    │
          │  sanitizer · toolbar-config · extensions │
          └─────┬──────────────────────────────────┘
                │
          ┌─────▼──────────────────────────────────┐
          │  Tiptap v3 / ProseMirror / DOMPurify    │
          └─────────────────────────────────────────┘

Flujo de datos

1. value (JSON string) → parseValue() → contenido inicial → createEditor(...) monta ProseMirror.
2. Usuario escribe → onUpdate → buildOutput(editor) → { json, html, text } (HTML sanitizado) → emite coInput.
3. Blur → emite coChange + coBlur (valor confirmado).
4. Cambio externo de value → @Watch('value') compara con lastEmitted; si es diferente, llama setContent() con guard para evitar loop.

Uso rápido

HTML

<co-rich-text-editor
  preset="task"
  label="Descripción"
  placeholder="Escribe aquí…"
></co-rich-text-editor>

<script>
  const editor = document.querySelector('co-rich-text-editor');
  editor.addEventListener('coChange', (e) => {
    console.log(e.detail); // { json, html, text }
  });
</script>

Vue

<template>
  <CoRichTextEditor
    preset="task"
    label="Descripción"
    placeholder="Escribe aquí…"
    @co-change="onSave"
  />
</template>

<script setup>
import { CoRichTextEditor } from '@prolibu-suite/cobalt-vue';

function onSave(e) {
  const { json, html, text } = e.detail;
}
</script>

React

import { CoRichTextEditor } from '@prolibu-suite/cobalt-react';

function MyForm() {
  return (
    <CoRichTextEditor
      preset="task"
      label="Descripción"
      placeholder="Escribe aquí…"
      onCoChange={(e) => console.log(e.detail)}
    />
  );
}

Formularios

{
  "type": "String",
  "uiCom": "HtmlEditor",
  "label": "Notas",
  "placeholder": "Escribe aquí…",
  "preset": "task"
}

En el sistema de formularios, uiCom: 'HtmlEditor' resuelve a FieldRichText.vue → co-rich-text-editor. El valor se persiste como HTML (compatible con Quill).

Visor de solo lectura

<!-- Modo HTML (ligero, sin Tiptap) -->
<co-rich-text-viewer
  format="html"
  preset="document"
  value="<p>Contenido <strong>enriquecido</strong></p>"
></co-rich-text-viewer>

<!-- Modo JSON (importa serializer lazy) -->
<co-rich-text-viewer
  format="json"
  preset="task"
  value='{"type":"doc","content":[...]}'
></co-rich-text-viewer>