K
KoreUI

Prose

UI

El texto enriquecido, ya publicado: sanea lo que le llega y le pone los estilos de títulos, listas, citas y bloques de código.

Uso básico

Lo que guardó el editor, pintado.

Un título

Un párrafo con negrita y un enlace.

  • Una lista
  • Con dos puntos
Y una cita.
<x-kore::prose :html="$articulo->cuerpo" />

{{-- O, si se guardó en markdown --}}
<x-kore::prose :markdown="$articulo->cuerpo" />
<x-kore::prose :html="$articulo->cuerpo" />

{{-- O, si se guardó en markdown --}}
<x-kore::prose :markdown="$articulo->cuerpo" />

Por qué existe

Publicar lo que escribe el editor tenía dos trampas, y las dos había que saberlas de memoria.

  • Pintarlo sin sanear es un XSS almacenado. El texto enriquecido solo se ve enriquecido si se pinta con {!! !!}, y el valor viaja por wire:model: el saneado del navegador no cuenta. Por :html, prose lo pasa por la lista blanca antes de pintarlo — es la última línea, y aquí ya no hay ninguna después.
  • Los estilos solo existían dentro del editor. Los títulos, las listas y los bloques de código tenían estilo bajo una clase interna del propio editor, así que el artículo publicado salía sin ninguno.

Con :markdown no hay nada que sanear: el HTML lo fabrica el parser con las etiquetas que decide él, no el usuario.

El slot no sanea

Y es a propósito.

Por :html y :markdown, prose sanea. Por slot pinta tal cual: ahí dentro puede haber componentes, y sanearlo se llevaría por delante lo que no es suyo. Quien lo use por slot, sanea él.

&lt;x-kore::prose :html="$articulo-&gt;cuerpo" /&gt;


&lt;x-kore::prose&gt;
    &lt;h2&gt;Un título de la propia plantilla&lt;/h2&gt;
    &lt;x-mi-componente /&gt;
&lt;/x-kore::prose&gt;
&lt;x-kore::prose :html="$articulo-&gt;cuerpo" /&gt;


&lt;x-kore::prose&gt;
    &lt;h2&gt;Un título de la propia plantilla&lt;/h2&gt;
    &lt;x-mi-componente /&gt;
&lt;/x-kore::prose&gt;

Tamaños

Tres tamaños de texto base; los títulos y el resto escalan con él.

Pequeño

Un párrafo con negrita.

Medio, el de por defecto

Un párrafo con negrita.

Grande

Un párrafo con negrita.

<x-kore::prose size="sm" :html="$html" />
<x-kore::prose :html="$html" />
<x-kore::prose size="lg" :html="$html" />
<x-kore::prose size="sm" :html="$html" />
<x-kore::prose :html="$html" />
<x-kore::prose size="lg" :html="$html" />

Props

Prop Tipo Default Descripción
html string|null null El HTML guardado. Se sanea antes de pintarlo
markdown string|null null El markdown guardado. No hace falta sanearlo: el HTML lo fabrica el parser
size string|null config md Tamaño del texto: sm, md, lg. Sale de kore-ui.ui.prose.size
Cargando