Cómo Sobrescribir Correctamente el Block Blot en Quill con un Span

Quill es un poderoso editor WYSIWYG que permite personalizar la forma en que se generan los elementos HTML en el contenido editable. Sin embargo, al intentar reemplazar elementos por defecto como <p> con <span> mientras se usan atributos personalizados, pueden surgir ciertos problemas. Este artículo aborda cómo sobrescribir correctamente el bloque blot en Quill para que utilice <span> y resuelva el problema de que los saltos de línea (<br>) se inserten dentro de un <span>.

Problema Descrito

El objetivo es crear un editor que utilice un sintaxis personalizada de markdown, substituyendo elementos como párrafos (<p>) y tablas (<table>) con spans que contengan atributos data-type específicos. El problema se presenta cuando se inserta un salto de línea, ya que este también se envuelve en un <span>.

Código Propuesto

A continuación, se propone un código que se puede usar en un entorno de desarrollo como CodePen. Este código define varios blots personalizados en Quill:

// Importar módulos de Quill
const Block = Quill.import('blots/block');
const Inline = Quill.import('blots/inline');

// Blot de párrafo personalizado
class CustomParagraph extends Block {
    static create() {
        let node = super.create();
        node.setAttribute('data-type', 'p');
        return node;
    }
}
CustomParagraph.blotName = "block";
CustomParagraph.tagName = "span";
Quill.register(CustomParagraph, true);

// Blot de span personalizado
class CustomSpan extends Inline {
    static create() {
        let node = super.create();
        node.setAttribute('data-type', 'span');
        return node;
    }
}
CustomSpan.blotName = "custom-span";
CustomSpan.tagName = "span";
Quill.register(CustomSpan, true);

// Blots personalizados para tablas y filas pueden ser definidos de manera similar...

// Inicializar Quill
const quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
        toolbar: [
            [{ 'header': [1, 2, false] }],
            ['bold', 'italic', 'underline'],
            ['clean']
        ]
    },
    formats: ['custom-p', 'custom-span']
});

// Función para actualizar el HTML
function updateHtmlOutput() {
    document.getElementById('output').textContent = quill.root.innerHTML;
}

// Escuchar cambios y actualizar la salida
quill.on('text-change', updateHtmlOutput);

Soluciones al Problema

1. Eliminar saltos de línea de los spans: Puedes personalizar el comportamiento del retorno de carro (Enter) y el manejo del br para que no envuelva el salto de línea en un <span>. Esto podría implicar la necesidad de una lógica adicional en el método que maneja estas entradas.

2. Registro de nuevos blots: Asegúrate de que todos los nuevos blots que crees, como CustomTable o CustomTableRow, sigan el mismo patrón que CustomParagraph y CustomSpan.

3. Manejo del portapapeles: Modifica el comportamiento del portapapeles para adaptarse a tus nuevos formatos y asegurarte de que el contenido que se pega en el editor tenga el formato correcto.

Conclusión

Personalizar Quill para usar spans en lugar de elementos de bloque estándar puede ser complejo pero efectivo. Siguiendo estas directrices y ajustando el comportamiento de los saltos de línea, es posible crear un editor que se adapte perfectamente a tus necesidades de sintaxis personalizada. Si persisten problemas, considera revisar la lógica del manejo de eventos dentro de Quill para adaptarla al comportamiento deseado.