Trouble configuring CKEditor downcast for custom element

Question

I have a custom Media Library which I need to integrate with CKEditor 5. I've managed to write a plugin for adding images and another for adding download links for documents, but I can't get the downcast conversion for the download links to work properly.

I am currently able to insert the following into the content of the CKEditor window:

<a class="downloadLink" data-file-id="3" download="pretty-file-name-for-download.pdf" href="actual_file_name.pdf">Download link text</a>

and when I save my content this gets written to the database - so far so good.

When I reload the content into the editor, it comes back formatted differently:

<a href="actual_file_name.pdf">
<a class="downloadLink" data-file-id="3" download="pretty-file-name-for-download.pdf" href="actual_file_name.pdf">Download link text</a>
</a>

There is now an additional anchor tag wrapping the original anchor tag.

My downcast and upcast converters look like this:

conversion.for('downcast').elementToElement( {
    model: {
        name: 'downloadLink',
        attributes: ['fileId', 'fileUrl', 'fileDownloadName', 'title']
    },
    view: (modelElement, conversionApi) => {
        const viewWriter = conversionApi.writer;
        return viewWriter.createContainerElement(
            'a',
            {
                'data-file-id': modelElement.getAttribute('fileId'),
                'download': modelElement.getAttribute('fileDownloadName'),
                'href': modelElement.getAttribute('fileUrl'),
                'class': 'downloadLink'
            },
            viewWriter.createText(modelElement.getAttribute('title'))
        );
    }
} );

conversion.for('upcast').elementToElement( {
    view: {
        name: 'a',
        classes: 'downloadLink'
    },
    model: (viewElement, conversionApi) => {
        const modelWriter = conversionApi.writer;
        return modelWriter.createElement(
            'downloadLink',
            {
                fileId: viewElement.getAttribute('data-file-id'),
                fileUrl: viewElement.getAttribute('href'),
                fileDownloadName: viewElement.getAttribute('download'),
                title: viewElement.getChild(0).data,
            }
        );
    }
} );

If anyone has any suggestions about what I'm doing wrong I'd appreciate the help!

Trouble configuring CKEditor downcast for custom element

0 Answers0