ckeditor5 icon indicating copy to clipboard operation
ckeditor5 copied to clipboard

Event-based API doesn't upcast HTML tag

Open sociopart opened this issue 1 year ago • 0 comments

Hello. I have this HTML block which is correctly exporting from CKEditor mentions plugin.

<pt_mention class="mention" data-type="mention" data-mention="@Sample User" data-user-id="000" href="/users/000">@=Sample User</pt_mention>

I want to convert it back to CKEditor, so I tried to write a dispatcher using event-based API.

  editor.data.upcastDispatcher.on('element:pt_mention', (evt, data, conversionApi) => {
    console.log('Upcast started');

    const {
        consumable,
        writer,
        safeInsert,
        updateConversionResult
    } = conversionApi;

    const { viewItem } = data;


    const mentionClass = { name: true, classes: 'mention' };

    if (!consumable.test(viewItem, mentionClass)) {
        return;
    }

    const modelElement = writer.createElement('span', {
        'class': 'mention',
        'data-mention': viewItem.getAttribute('data-mention')
    });


    if (!safeInsert(modelElement, data.modelCursor)) {
        console.log("error")
        return;
    }

    modelElement.textContent = viewItem.getTextContent();

    consumable.consume(viewItem, mentionClass);

    updateConversionResult(modelElement, data);
});

But it keeps logging "error" to console, doesn't handle any attributes and creates <p> tag which only contains text.

The result should look like <span class="mention" .... >

So, what I'm doing wrong and how it should be implemented?

Thanks in advance!

sociopart avatar May 14 '24 13:05 sociopart